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

React wrapper around the dotlottie-web library

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