@lottiefiles/dotlottie-react - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

dist/use-dotlottie.js

@@ -32,22 +32,50 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
   const [dotLottie, setDotLottie] = React.useState(null);
+  const dotLottieRef = React.useRef(null);
   const canvasRef = React.useRef(null);
   const containerRef = React.useRef(null);
-  React.useEffect(() => {
-    return () => {
-      dotLottie?.destroy();
-      setDotLottie(null);
-    };
-  }, []);
-  const setCanvasRef = React.useCallback((canvas) => {
-    if (canvas) {
-      const dotLottieInstance = new DotLottie({
-        ...dotLottieConfig,
-        canvas
+  dotLottieRef.current = dotLottie;
+  const [intersectionObserver] = React.useState(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            dotLottieRef.current?.unfreeze();
+          } else {
+            dotLottieRef.current?.freeze();
+          }
+        });
+      },
+      {
+        threshold: 0
+      }
+    );
+    return observer;
+  });
+  const [resizeObserver] = React.useState(() => {
+    const observer = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        dotLottieRef.current?.resize();
       });
-      setDotLottie(dotLottieInstance);
-    } else {
-      dotLottie?.destroy();
-    }
-    canvasRef.current = canvas;
-  }, []);
+    });
+    return observer;
+  });
+  const setCanvasRef = React.useCallback(
+    (canvas) => {
+      if (canvas) {
+        const dotLottieInstance = new DotLottie({
+          ...dotLottieConfig,
+          canvas
+        });
+        setDotLottie(dotLottieInstance);
+        intersectionObserver.observe(canvas);
+        resizeObserver.observe(canvas);
+      } else {
+        dotLottieRef.current?.destroy();
+        intersectionObserver.disconnect();
+        resizeObserver.disconnect();
+      }
+      canvasRef.current = canvas;
+    },
+    [intersectionObserver, resizeObserver]
+  );
   const setContainerRef = React.useCallback((container) => {
@@ -62,2 +90,25 @@ containerRef.current = container;
   );
+  React.useEffect(() => {
+    function onVisibilityChange() {
+      if (document.hidden) {
+        dotLottieRef.current?.freeze();
+      } else {
+        dotLottieRef.current?.unfreeze();
+      }
+    }
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      if (!dotLottie)
+        return;
+      dotLottie.destroy();
+      setDotLottie(null);
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+    };
+  }, []);
   return {
@@ -64,0 +115,0 @@ dotLottie,

package.json

 {
   "name": "@lottiefiles/dotlottie-react",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
@@ -42,3 +42,3 @@ "description": "React wrapper around the dotlottie-web library",
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "0.9.2"
+    "@lottiefiles/dotlottie-web": "0.10.0"
   },
@@ -45,0 +45,0 @@ "devDependencies": {

README.md

@@ -20,2 +20,3 @@ # @lottiefiles/dotlottie-react
 * [Usage](#usage)
+* [Live Examples](#live-examples)
 * [APIs](#apis)
@@ -61,2 +62,6 @@ * [DotLottieReactProps](#dotlottiereactprops)
 
+## Live Examples
+
+* <a href="https://codesandbox.io/p/sandbox/dotlottie-react-basic-example-66cwfq?autoresize=1&file=%2Fsrc%2FApp.tsx&fontsize=14&hidenavigation=1&theme=dark" target="_blank">Basic Example</a>
+
 ## APIs
@@ -63,0 +68,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12843

increased by15.27%

Lines of code

185

increased by38.06%

Number of lines in readme file

108

increased by4.85%

Dependency changes

• + Added@lottiefiles/dotlottie-web@0.10.0(transitive)

• - Removed@lottiefiles/dotlottie-web@0.9.2(transitive)

• Updated@lottiefiles/dotlottie-web@0.10.0