react-gif-timeline 0.0.1 → 0.1.0

package/dist/index.d.ts

@@ -15,6 +15,8 @@ interface GifTimelineResult {
     canvasRef: RefObject<HTMLCanvasElement | null>;
     currentFrame: number;
     totalFrames: number;
+    width: number;
+    height: number;
     isLoaded: boolean;
     error: string | null;
     isTransitioning: boolean;
@@ -27,9 +29,29 @@ interface GifTimelineProps<A extends Anchors> extends GifTimelineOptions<A> {
     renderError?: (error: string) => ReactNode;
     children?: (result: GifTimelineResult) => ReactNode;
 }
+interface GifFrameOptions<A extends Anchors> {
+    src: string | Blob;
+    anchors: A;
+    activeState: ActiveState<A>;
+    speed?: number;
+    onTransitionStart?: (fromFrame: number, toFrame: number) => void;
+    onTransitionEnd?: (state: ActiveState<A>) => void;
+}
+interface GifFrameResult {
+    currentFrame: number;
+    totalFrames: number;
+    width: number;
+    height: number;
+    isLoaded: boolean;
+    error: string | null;
+    isTransitioning: boolean;
+    transitionProgress: number;
+}
 
 declare function GifTimeline<A extends Anchors>(props: GifTimelineProps<A>): react_jsx_runtime.JSX.Element;
 
+declare function useGifFrame<A extends Anchors>(options: GifFrameOptions<A>): GifFrameResult;
+
 declare function useGifTimeline<A extends Anchors>(options: GifTimelineOptions<A>): GifTimelineResult;
 
-export { type ActiveState, type Anchors, GifTimeline, type GifTimelineOptions, type GifTimelineProps, type GifTimelineResult, useGifTimeline };
+export { type ActiveState, type Anchors, type GifFrameOptions, type GifFrameResult, GifTimeline, type GifTimelineOptions, type GifTimelineProps, type GifTimelineResult, useGifFrame, useGifTimeline };

package/dist/index.js

@@ -1,4 +1,26 @@
 // src/useGifTimeline.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/frameRenderer.ts
+function initCanvas(canvas, width, height) {
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(dpr, dpr);
+}
+function renderFrame(canvas, frame, width, height) {
+  const ctx = canvas.getContext("2d");
+  const temp = document.createElement("canvas");
+  temp.width = width;
+  temp.height = height;
+  const tempCtx = temp.getContext("2d");
+  tempCtx.putImageData(frame, 0, 0);
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(temp, 0, 0, width, height);
+}
+
+// src/useGifCore.ts
 import { useEffect, useRef, useState } from "react";
 
 // src/animator.ts
@@ -40,27 +62,6 @@ function animate(fromFrame, toFrame, delays, speed, onFrame, onComplete) {
   };
 }
 
-// src/frameRenderer.ts
-function initCanvas(canvas, width, height) {
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = width * dpr;
-  canvas.height = height * dpr;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  const ctx = canvas.getContext("2d");
-  ctx.scale(dpr, dpr);
-}
-function renderFrame(canvas, frame, width, height) {
-  const ctx = canvas.getContext("2d");
-  const temp = document.createElement("canvas");
-  temp.width = width;
-  temp.height = height;
-  const tempCtx = temp.getContext("2d");
-  tempCtx.putImageData(frame, 0, 0);
-  ctx.clearRect(0, 0, width, height);
-  ctx.drawImage(temp, 0, 0, width, height);
-}
-
 // src/gifParser.ts
 import { decompressFrames, parseGIF } from "gifuct-js";
 async function parseGifSource(src) {
@@ -100,16 +101,15 @@ async function parseGifSource(src) {
   return { frames, delays, width, height };
 }
 
-// src/useGifTimeline.ts
+// src/useGifCore.ts
 function resolveAnchorFrame(anchors, activeState) {
   if (Array.isArray(anchors)) {
     return anchors[activeState];
   }
   return anchors[activeState];
 }
-function useGifTimeline(options) {
+function useGifCore(options) {
   const { src, anchors, activeState, speed = 1, onTransitionStart, onTransitionEnd } = options;
-  const canvasRef = useRef(null);
   const gifDataRef = useRef(null);
   const currentFrameRef = useRef(0);
   const animatorRef = useRef(null);
@@ -134,16 +134,10 @@ function useGifTimeline(options) {
     parseGifSource(src).then((data) => {
       if (cancelled) return;
       gifDataRef.current = data;
-      if (canvasRef.current) {
-        initCanvas(canvasRef.current, data.width, data.height);
-      }
       const initialFrame = resolveAnchorFrame(anchorsRef.current, activeStateRef.current);
       const clampedFrame = Math.min(Math.max(0, initialFrame), data.frames.length - 1);
       currentFrameRef.current = clampedFrame;
       setCurrentFrame(clampedFrame);
-      if (canvasRef.current) {
-        renderFrame(canvasRef.current, data.frames[clampedFrame], data.width, data.height);
-      }
       setIsLoaded(true);
     }).catch((err) => {
       if (cancelled) return;
@@ -185,16 +179,13 @@ function useGifTimeline(options) {
       speed,
       (frameIndex) => {
         currentFrameRef.current = frameIndex;
-        if (canvasRef.current) {
-          renderFrame(canvasRef.current, data.frames[frameIndex], data.width, data.height);
-        }
+        setCurrentFrame(frameIndex);
         if (frameIndex !== fromFrame) {
           stepsDone++;
           setTransitionProgress(totalSteps > 0 ? stepsDone / totalSteps : 1);
         }
       },
       () => {
-        setCurrentFrame(targetFrame);
         setIsTransitioning(false);
         setTransitionProgress(1);
         onTransitionEndRef.current?.(activeStateRef.current);
@@ -215,9 +206,11 @@ function useGifTimeline(options) {
     };
   }, []);
   return {
-    canvasRef,
+    gifDataRef,
     currentFrame,
     totalFrames: gifDataRef.current?.frames.length ?? 0,
+    width: gifDataRef.current?.width ?? 0,
+    height: gifDataRef.current?.height ?? 0,
     isLoaded,
     error,
     isTransitioning,
@@ -225,6 +218,23 @@ function useGifTimeline(options) {
   };
 }
 
+// src/useGifTimeline.ts
+function useGifTimeline(options) {
+  const { gifDataRef, ...result } = useGifCore(options);
+  const canvasRef = useRef2(null);
+  useEffect2(() => {
+    const data = gifDataRef.current;
+    if (!canvasRef.current || !data || !result.isLoaded) return;
+    initCanvas(canvasRef.current, data.width, data.height);
+  }, [result.isLoaded]);
+  useEffect2(() => {
+    const data = gifDataRef.current;
+    if (!canvasRef.current || !data) return;
+    renderFrame(canvasRef.current, data.frames[result.currentFrame], data.width, data.height);
+  }, [result.currentFrame, result.isLoaded]);
+  return { ...result, canvasRef };
+}
+
 // src/GifTimeline.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function GifTimeline(props) {
@@ -268,7 +278,14 @@ function GifTimeline(props) {
     result.isLoaded && children?.(result)
   ] });
 }
+
+// src/useGifFrame.ts
+function useGifFrame(options) {
+  const { gifDataRef: _, ...result } = useGifCore(options);
+  return result;
+}
 export {
   GifTimeline,
+  useGifFrame,
   useGifTimeline
 };

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "react-gif-timeline",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Control GIF animation timelines with React state — map anchor frames to states and animate between them.",
   "sideEffects": false,
-  "workspaces": ["demo"],
+  "workspaces": [
+    "demo"
+  ],
   "license": "MIT",
   "type": "module",
   "types": "./dist/index.d.ts",