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

React wrapper around the dotlottie-web library

"use client";import{DotLottie as e,DotLottieWorker as t}from"@lottiefiles/dotlottie-web";import{useCallback as n,useEffect as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({animationId:e,autoplay:t,backgroundColor:o,className:s,createDotLottie:c,data:l,dotLottieRefCallback:u,layout:d,loop:f,mode:p,playOnHover:m,renderConfig:h,segment:g,speed:_,src:v,stateMachineConfig:y,stateMachineId:b,style:x,themeData:S,themeId:C,useFrameInterpolation:w,workerId:T,...E})=>{let D=i(null),O=i(null),k=i(u),A={speed:_,mode:p,loop:f,useFrameInterpolation:w,segment:g,backgroundColor:o,autoplay:t,themeId:C,workerId:T,src:v,data:l,layout:d,renderConfig:h,animationId:e,stateMachineConfig:y,stateMachineId:b},j=i(A);k.current=u,j.current=A;let M=n(e=>{O.current=e,e?D.current=c({...j.current,canvas:e}):(D.current?.destroy(),D.current=null),k.current?.(D.current)},[]);return r(()=>{let e=e=>{m&&(e.type===`mouseenter`&&D.current?.play(),e.type===`mouseleave`&&D.current?.pause())};return O.current?.addEventListener(`mouseenter`,e),O.current?.addEventListener(`mouseleave`,e),()=>{O.current?.removeEventListener(`mouseenter`,e),O.current?.removeEventListener(`mouseleave`,e)}},[m]),r(()=>{D.current?.setSpeed(_??1)},[_]),r(()=>{D.current?.setMode(p??`forward`)},[p]),r(()=>{D.current?.setLoop(f??!1)},[f]),r(()=>{D.current?.setUseFrameInterpolation(w??!0)},[w]),r(()=>{typeof g?.[0]==`number`&&typeof g[1]==`number`?D.current?.setSegment(g[0],g[1]):D.current?.resetSegment()},[g]),r(()=>{D.current?.setBackgroundColor(o??``)},[o]),r(()=>{D.current?.setRenderConfig(h??{})},[JSON.stringify(h)]),r(()=>{typeof l!=`string`&&typeof l!=`object`||D.current?.load({data:l,...j.current})},[l]),r(()=>{typeof v==`string`&&D.current?.load({src:v,...j.current})},[v]),r(()=>{D.current?.setMarker(E.marker??``)},[E.marker]),r(()=>{D.current?.isLoaded&&D.current.activeAnimationId!==e&&D.current.loadAnimation(e??``)},[e]),r(()=>{typeof C==`string`&&D.current?.setTheme(C)},[C]),r(()=>{D.current?.setThemeData(S??``)},[S]),r(()=>{D.current?.setLayout(d??{})},[d?.fit,d?.align?.[0],d?.align?.[1]]),r(()=>{D.current?.isLoaded&&(typeof b==`string`&&b?D.current.stateMachineLoad(b)&&D.current.stateMachineStart():D.current.stateMachineStop())},[b]),r(()=>{D.current?.stateMachineSetConfig(y??null)},[y]),a(`div`,{className:s,...!s&&{style:{width:`100%`,height:`100%`,lineHeight:0,...x}},children:a(`canvas`,{ref:M,style:{width:`100%`,height:`100%`},...E})})},s=t=>new e(t),c=e=>a(o,{...e,createDotLottie:s}),l=e=>new t(e),u=e=>a(o,{...e,createDotLottie:l}),d=n=>{t.setWasmUrl(n),e.setWasmUrl(n)};export{c as DotLottieReact,u as DotLottieWorkerReact,d as setWasmUrl};
//# sourceMappingURL=index.js.map