@lottiefiles/dotlottie-react/dist/index.js

React wrapper around the dotlottie-web library

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(n??{});},[n?.fit,n?.align&&n.align[0],n?.align&&n.align[1]]),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