Skip to content

jeetiss/react-gifs

Repository files navigation

react gifs

Set of react tools for GIF rendering

npm build min+zip size

Features

  • small : Just 4.99 KB gzipped code
  • modular : Use hooks and components that you need
  • fast : Uses web workers for parsing

Getting Started

npm install @react-gifs/tools
import { useWorkerParser, usePlayerState, usePlayback, Canvas } from "@react-gifs/tools";

const Gif = (src) => {
  // default state
  const [state, update] = usePlayerState();

  //  load and parse gif
  useWorkerParser(src, update);

  // updates current index
  usePlayback(state, () => update(({ index }) => ({ index: index + 1 })));

  // render frames
  return <Canvas {...state} />;
};

Demos