perf(react): ⚡️ render only visible canvas area (#259)

* perf(react): ⚡️ render only visible canvas area

* chore: 🤖 update changelog

.changeset/thin-humans-run.md

@@ -0,0 +1,9 @@
+---
+'@lottiefiles/dotlottie-react': minor
+---
+
+perf(react): ⚡️ render only visible canvas area
+
+This update optimizes the rendering performance by ensuring that only the visible portion of the canvas is rendered, utilizing the dotlottie-web `setViewport` API.
+
+> Note: No changes are required for existing usage. The optimization is applied internally within the `DotLottieReact` component.

apps/dotlottie-react-example/src/App.tsx

@@ -78,6 +78,10 @@ function App() {
         playOnHover={playOnHover}
         autoResizeCanvas={autoResizeCanvas}
         marker={marker}
+        style={{
+          margin: '2px',
+          border: '1px solid white',
+        }}
         animationId={currentAnimationId}
       />
       <input type="range" min="0" max="100" defaultValue="0" value={progress} />

packages/react/src/use-dotlottie.tsx

@@ -58,6 +58,27 @@ export interface UseDotLottieResult {
 
 const isServerSide = (): boolean => typeof window === 'undefined';
 
+const getCanvasViewport = (
+  canvas: HTMLCanvasElement,
+  dpr: number,
+): { height: number; width: number; x: number; y: number } => {
+  const rect = canvas.getBoundingClientRect();
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+
+  const visibleLeft = Math.max(0, -rect.left);
+  const visibleTop = Math.max(0, -rect.top);
+  const visibleRight = Math.min(rect.width, windowWidth - rect.left);
+  const visibleBottom = Math.min(rect.height, windowHeight - rect.top);
+
+  const x = visibleLeft * dpr;
+  const y = visibleTop * dpr;
+  const width = (visibleRight - visibleLeft) * dpr;
+  const height = (visibleBottom - visibleTop) * dpr;
+
+  return { x, y, width, height };
+};
+
 export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
   const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
 
@@ -80,6 +101,20 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
     }
   }, []);
 
+  const updateViewport = useCallback(() => {
+    if (!dotLottieRef.current) return;
+
+    const canvas = canvasRef.current;
+
+    if (!canvas) return;
+
+    const dpr = configRef.current?.renderConfig?.devicePixelRatio || window.devicePixelRatio || 1;
+
+    const { height, width, x, y } = getCanvasViewport(canvas, dpr);
+
+    dotLottieRef.current.setViewport(x, y, width, height);
+  }, []);
+
   const intersectionObserver = useMemo(() => {
     if (isServerSide()) return null;
 
@@ -157,7 +192,9 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
       }
       canvas.addEventListener('mouseenter', hoverHandler);
       canvas.addEventListener('mouseleave', hoverHandler);
+      dotLottieInstance.addEventListener('frame', updateViewport);
 
+      updateViewport();
       setDotLottie(dotLottieInstance);
     }
 
@@ -169,7 +206,7 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
       canvas?.removeEventListener('mouseenter', hoverHandler);
       canvas?.removeEventListener('mouseleave', hoverHandler);
     };
-  }, [intersectionObserver, resizeObserver, hoverHandler]);
+  }, [intersectionObserver, resizeObserver, hoverHandler, updateViewport]);
 
   // speed reactivity
   useEffect(() => {