@lottiefiles/dotlottie-react - npm Package Compare versions

Comparing version 0.12.1 to 0.13.0-beta.3

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: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
+import {DotLottieWorker,DotLottie}from'@lottiefiles/dotlottie-web';import {useState,useRef,useEffect,useCallback}from'react';import {jsx}from'react/jsx-runtime';var p=({animationId:o,autoplay:B,backgroundColor:m,className:T,createDotLottie:E,data:s,dotLottieRefCallback:W,loop:D,mode:d,playOnHover:b,renderConfig:y,segment:n,speed:k,src:f,style:S,themeData:w,themeId:l,useFrameInterpolation:g,workerId:h,...R})=>{let[r,v]=useState(null),c=useRef(null),t=useRef(null),C=useRef(W),P={speed:k,mode:d,loop:D,useFrameInterpolation:g,segment:n,backgroundColor:m,autoplay:B,themeId:l,workerId:h,src:f,data:s,renderConfig:y},a=useRef(P);C.current=W,t.current=r,a.current=P,useEffect(()=>{typeof C.current=="function"&&r&&C.current(r);},[r]);let O=useCallback(i=>{if(c.current=i,i){let u=E({...a.current,canvas:i});v(u);}else r?.destroy(),v(null);},[]);return useEffect(()=>{let i=u=>{b&&(u.type==="mouseenter"&&t.current?.play(),u.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);}},[b]),useEffect(()=>()=>{r&&(r.destroy(),v(null));},[r]),useEffect(()=>{t.current?.setSpeed(k??1);},[k]),useEffect(()=>{t.current?.setMode(d??"forward");},[d]),useEffect(()=>{t.current?.setLoop(D??!1);},[D]),useEffect(()=>{t.current?.setUseFrameInterpolation(g??!0);},[g]),useEffect(()=>{typeof n?.[0]=="number"&&typeof n[1]=="number"&&t.current?.setSegment(n[0],n[1]);},[n]),useEffect(()=>{t.current?.setBackgroundColor(m??"");},[m]),useEffect(()=>{t.current?.setRenderConfig(y??{});},[JSON.stringify(y)]),useEffect(()=>{typeof s!="string"&&typeof s!="object"||t.current?.load({data:s,...a.current});},[s]),useEffect(()=>{typeof f=="string"&&t.current?.load({src:f,...a.current});},[f]),useEffect(()=>{t.current?.setMarker(R.marker??"");},[R.marker]),useEffect(()=>{t.current?.loadAnimation(o??"");},[o]),useEffect(()=>{typeof l=="string"&&t.current?.setTheme(l);},[l]),useEffect(()=>{t.current?.setThemeData(w??"");},[w]),jsx("div",{className:T,...!T&&{style:{width:"100%",height:"100%",lineHeight:0,...S}},children:jsx("canvas",{ref:O,style:{width:"100%",height:"100%"},...R})})};var H=o=>new DotLottie(o),Z=o=>jsx(p,{...o,createDotLottie:H});var A=o=>new DotLottieWorker(o),tt=o=>jsx(p,{...o,createDotLottie:A});var it=o=>{DotLottieWorker.setWasmUrl(o),DotLottie.setWasmUrl(o);};export{Z as DotLottieReact,tt as DotLottieWorkerReact,it as setWasmUrl};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@lottiefiles/dotlottie-react",
-  "version": "0.12.1",
+  "version": "0.13.0-beta.3",
   "type": "module",
@@ -39,3 +39,3 @@ "description": "React wrapper around the dotlottie-web library",
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "0.39.0"
+    "@lottiefiles/dotlottie-web": "0.39.0-beta.3"
   },
@@ -42,0 +42,0 @@ "devDependencies": {

README.md

@@ -86,2 +86,3 @@ # @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.                                                                                                                                                                                                                   |   |
@@ -96,3 +97,2 @@
 | `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

No alert changes

Worsened metrics

Total package byte prevSize

33482

decreased by-1.2%

Lines of code

60

decreased by-1.64%

Dependency changes

• + Added@lottiefiles/dotlottie-web@0.39.0-beta.3(transitive)

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

• Updated@lottiefiles/dotlottie-web@0.39.0-beta.3