@lottiefiles/dotlottie-react
Advanced tools
Comparing version 0.13.0-beta.3 to 0.13.0-beta.4
@@ -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 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 | ||
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 | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@lottiefiles/dotlottie-react", | ||
"version": "0.13.0-beta.3", | ||
"version": "0.13.0-beta.4", | ||
"type": "module", | ||
@@ -39,3 +39,3 @@ "description": "React wrapper around the dotlottie-web library", | ||
"dependencies": { | ||
"@lottiefiles/dotlottie-web": "0.39.0-beta.3" | ||
"@lottiefiles/dotlottie-web": "0.39.0-beta.4" | ||
}, | ||
@@ -42,0 +42,0 @@ "devDependencies": { |
Sorry, the diff of this file is not supported yet
34203
61
+ Added@lottiefiles/dotlottie-web@0.39.0-beta.4(transitive)
- Removed@lottiefiles/dotlottie-web@0.39.0-beta.3(transitive)