@lottiefiles/dotlottie-react - npm Package Compare versions

Comparing version 0.13.0-beta.7 to 0.13.0-dev.0

dist/index.js

@@ -1,2 +0,2 @@
-import {DotLottieWorker,DotLottie}from'@lottiefiles/dotlottie-web';import {useState,useRef,useEffect,useCallback}from'react';import {jsx}from'react/jsx-runtime';var m=({animationId:o,autoplay:E,backgroundColor:D,className:W,createDotLottie:S,data:s,dotLottieRefCallback:b,loop:d,mode:y,playOnHover:w,renderConfig:k,segment:n,speed:g,src:f,stateMachineId:l,style:O,themeData:P,themeId:a,useFrameInterpolation:R,workerId:h,...v})=>{let[r,C]=useState(null),c=useRef(null),t=useRef(null),T=useRef(b),x={speed:g,mode:y,loop:d,useFrameInterpolation:R,segment:n,backgroundColor:D,autoplay:E,themeId:a,stateMachineId:l,workerId:h,src:f,data:s,renderConfig:k},u=useRef(x);T.current=b,t.current=r,u.current=x,useEffect(()=>{typeof T.current=="function"&&r&&T.current(r);},[r]);let J=useCallback(i=>{if(c.current=i,i){let L=S({...u.current,canvas:i});C(L);}else r?.destroy(),C(null);},[]);return useEffect(()=>{let i=L=>{w&&(L.type==="mouseenter"&&t.current?.play(),L.type==="mouseleave"&&t.current?.pause());};return c.current?.addEventListener("mouseenter",i),c.current?.addEventListener("mouseleave",i),()=>{c.current?.removeEventListener("mouseenter",i),c.current?.removeEventListener("mouseleave",i);}},[w]),useEffect(()=>()=>{r&&(r.destroy(),C(null));},[r]),useEffect(()=>{t.current?.setSpeed(g??1);},[g]),useEffect(()=>{t.current?.setMode(y??"forward");},[y]),useEffect(()=>{t.current?.setLoop(d??!1);},[d]),useEffect(()=>{t.current?.setUseFrameInterpolation(R??!0);},[R]),useEffect(()=>{typeof n?.[0]=="number"&&typeof n[1]=="number"&&t.current?.setSegment(n[0],n[1]);},[n]),useEffect(()=>{t.current?.setBackgroundColor(D??"");},[D]),useEffect(()=>{t.current?.setRenderConfig(k??{});},[JSON.stringify(k)]),useEffect(()=>{typeof s!="string"&&typeof s!="object"||t.current?.load({data:s,...u.current});},[s]),useEffect(()=>{typeof f=="string"&&t.current?.load({src:f,...u.current});},[f]),useEffect(()=>{t.current?.setMarker(v.marker??"");},[v.marker]),useEffect(()=>{t.current?.loadAnimation(o??"");},[o]),useEffect(()=>{typeof a=="string"&&t.current?.setTheme(a);},[a]),useEffect(()=>{typeof l=="string"&&(t.current?.stateMachineLoad(l),t.current?.stateMachineStart());},[l]),useEffect(()=>{t.current?.setThemeData(P??"");},[P]),jsx("div",{className:W,...!W&&{style:{width:"100%",height:"100%",lineHeight:0,...O}},children:jsx("canvas",{ref:J,style:{width:"100%",height:"100%"},...v})})};var U=o=>new DotLottie(o),$=o=>jsx(m,{...o,createDotLottie:U});var q=o=>new DotLottieWorker(o),et=o=>jsx(m,{...o,createDotLottie:q});var nt=o=>{DotLottieWorker.setWasmUrl(o),DotLottie.setWasmUrl(o);};export{$ as DotLottieReact,et as DotLottieWorkerReact,nt as setWasmUrl};//# sourceMappingURL=index.js.map
+import {DotLottieWorker,DotLottie}from'@lottiefiles/dotlottie-web';import {useState,useRef,useEffect,useCallback}from'react';import {jsx}from'react/jsx-runtime';var m=({animationId:o,autoplay:E,backgroundColor:D,className:W,createDotLottie:S,data:c,dotLottieRefCallback:b,layout:n,loop:d,mode:g,playOnHover:w,renderConfig:k,segment:s,speed:y,src:a,style:h,themeData:P,themeId:l,useFrameInterpolation:R,workerId:O,...v})=>{let[r,C]=useState(null),f=useRef(null),t=useRef(null),T=useRef(b),x={speed:y,mode:g,loop:d,useFrameInterpolation:R,segment:s,backgroundColor:D,autoplay:E,themeId:l,workerId:O,src:a,data:c,layout:n,renderConfig:k},u=useRef(x);T.current=b,t.current=r,u.current=x,useEffect(()=>{typeof T.current=="function"&&r&&T.current(r);},[r]);let J=useCallback(i=>{if(f.current=i,i){let L=S({...u.current,canvas:i});C(L);}else r?.destroy(),C(null);},[]);return useEffect(()=>{let i=L=>{w&&(L.type==="mouseenter"&&t.current?.play(),L.type==="mouseleave"&&t.current?.pause());};return f.current?.addEventListener("mouseenter",i),f.current?.addEventListener("mouseleave",i),()=>{f.current?.removeEventListener("mouseenter",i),f.current?.removeEventListener("mouseleave",i);}},[w]),useEffect(()=>()=>{r&&(r.destroy(),C(null));},[r]),useEffect(()=>{t.current?.setSpeed(y??1);},[y]),useEffect(()=>{t.current?.setMode(g??"forward");},[g]),useEffect(()=>{t.current?.setLoop(d??!1);},[d]),useEffect(()=>{t.current?.setUseFrameInterpolation(R??!0);},[R]),useEffect(()=>{typeof s?.[0]=="number"&&typeof s[1]=="number"&&t.current?.setSegment(s[0],s[1]);},[s]),useEffect(()=>{t.current?.setBackgroundColor(D??"");},[D]),useEffect(()=>{t.current?.setRenderConfig(k??{});},[JSON.stringify(k)]),useEffect(()=>{typeof c!="string"&&typeof c!="object"||t.current?.load({data:c,...u.current});},[c]),useEffect(()=>{typeof a=="string"&&t.current?.load({src:a,...u.current});},[a]),useEffect(()=>{t.current?.setMarker(v.marker??"");},[v.marker]),useEffect(()=>{t.current?.loadAnimation(o??"");},[o]),useEffect(()=>{typeof l=="string"&&t.current?.setTheme(l);},[l]),useEffect(()=>{t.current?.setThemeData(P??"");},[P]),useEffect(()=>{t.current?.setLayout({align:n?.align??[.5,.5],fit:n?.fit??"contain"});},[n?.align[0],n?.align[1],n?.fit]),jsx("div",{className:W,...!W&&{style:{width:"100%",height:"100%",lineHeight:0,...h}},children:jsx("canvas",{ref:J,style:{width:"100%",height:"100%"},...v})})};var U=o=>new DotLottie(o),_=o=>jsx(m,{...o,createDotLottie:U});var N=o=>new DotLottieWorker(o),et=o=>jsx(m,{...o,createDotLottie:N});var nt=o=>{DotLottieWorker.setWasmUrl(o),DotLottie.setWasmUrl(o);};export{_ as DotLottieReact,et as DotLottieWorkerReact,nt as setWasmUrl};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@lottiefiles/dotlottie-react",
-  "version": "0.13.0-beta.7",
+  "version": "0.13.0-dev.0",
   "type": "module",
@@ -20,2 +20,3 @@ "description": "React wrapper around the dotlottie-web library",
   "module": "dist/index.js",
+  "browser": "dist/browser/index.js",
   "types": "dist/index.d.ts",
@@ -40,3 +41,3 @@ "files": [
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "0.39.0-beta.7"
+    "@lottiefiles/dotlottie-web": "0.40.1"
   },
@@ -43,0 +44,0 @@ "devDependencies": {

README.md

@@ -86,3 +86,2 @@ # @lottiefiles/dotlottie-react
 | `useFrameInterpolation` | boolean                                |          | true                  | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. |   |
-| `autoResizeCanvas`      | boolean                                |          | true                  | Determines if the canvas should resize automatically to its container                                                                                                                                                                              |   |
 | `marker`                | string                                 |          | undefined             | The Lottie named marker to play.                                                                                                                                                                                                                   |   |
@@ -97,2 +96,3 @@
 | `devicePixelRatio` | number |          | window\.devicePixelRatio \| 1 | The device pixel ratio. |
+| `renderConfig.autoResize`       | boolean|          | true                          | Determines if the canvas should resize automatically to its container |
 
@@ -99,0 +99,0 @@ ## Custom Playback Controls

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2066140

increased by5940.82%

Number of package files

8

increased by33.33%

Lines of code

1735

increased by2744.26%

Worsened metrics

Number of medium supply chain risk alerts

5

increased byInfinity%

Dependency changes

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

• - Removed@lottiefiles/dotlottie-web@0.39.0-beta.7(transitive)

• Updated@lottiefiles/dotlottie-web@0.40.1