refactor(react): simplify DotLottie and DotLottieWorker initialization

LottieFiles · Oct 16, 2024 · 2915f38 · 2915f38
1 parent 77e8e59
commit 2915f38
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 37 deletions.
diff --git a/packages/react/src/use-dotlottie-worker.tsx b/packages/react/src/use-dotlottie-worker.tsx
@@ -39,10 +39,12 @@ export const useDotLottieWorker = (config: DotLottieWorkerConfig): UseDotLottieW
   useEffect(() => {
     let dotLottieInstance: DotLottieWorker | null = null;
 
-    if (config.canvasRef.current) {
+    const canvas = configRef.current?.canvasRef.current;
+
+    if (canvas) {
       dotLottieInstance = new DotLottieWorker({
         ...config,
-        canvas: config.canvasRef.current,
+        canvas,
       });
 
       setDotLottie(dotLottieInstance);
@@ -54,15 +56,7 @@ export const useDotLottieWorker = (config: DotLottieWorkerConfig): UseDotLottieW
         setDotLottie(null);
       }
     };
-  }, [config.canvasRef]);
-
-  // hover reactivity
-  useEffect(() => {
-    if (config.canvasRef.current) {
-      config.canvasRef.current.addEventListener('mouseenter', hoverHandler);
-      config.canvasRef.current.addEventListener('mouseleave', hoverHandler);
-    }
-  }, [config.canvasRef, hoverHandler]);
+  }, []);
 
   // hover reactivity
   useEffect(() => {
@@ -77,7 +71,7 @@ export const useDotLottieWorker = (config: DotLottieWorkerConfig): UseDotLottieW
         config.canvasRef.current.removeEventListener('mouseleave', hoverHandler);
       }
     };
-  }, [config.canvasRef]);
+  }, [config.canvasRef, hoverHandler]);
 
   // speed reactivity
   useEffect(() => {

diff --git a/packages/react/src/use-dotlottie.tsx b/packages/react/src/use-dotlottie.tsx
@@ -38,22 +38,15 @@ export const useDotLottie = (config: DotLottieConfig): UseDotLottieResult => {
   useEffect(() => {
     let dotLottieInstance: DotLottie | null = null;
 
-    if (config.canvasRef.current) {
-      // wait for canvas to be ready before initializing dotLottie
-      const interval = setInterval(() => {
-        if (
-          config.canvasRef.current &&
-          config.canvasRef.current.offsetWidth > 0 &&
-          config.canvasRef.current.offsetHeight > 0
-        ) {
-          clearInterval(interval);
-          dotLottieInstance = new DotLottie({
-            ...config,
-            canvas: config.canvasRef.current,
-          });
-          setDotLottie(dotLottieInstance);
-        }
-      }, 1);
+    const canvas = configRef.current?.canvasRef.current;
+
+    if (canvas) {
+      dotLottieInstance = new DotLottie({
+        ...config,
+        canvas,
+      });
+
+      setDotLottie(dotLottieInstance);
     }
 
     return () => {
@@ -62,15 +55,7 @@ export const useDotLottie = (config: DotLottieConfig): UseDotLottieResult => {
         setDotLottie(null);
       }
     };
-  }, [config.canvasRef]);
-
-  // hover reactivity
-  useEffect(() => {
-    if (config.canvasRef.current) {
-      config.canvasRef.current.addEventListener('mouseenter', hoverHandler);
-      config.canvasRef.current.addEventListener('mouseleave', hoverHandler);
-    }
-  }, [config.canvasRef, hoverHandler]);
+  }, []);
 
   // hover reactivity
   useEffect(() => {