lottie-react - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

build/index.d.ts

 /// <reference types="react" />
 import { AnimationDirection, AnimationSegment, AnimationItem, AnimationConfigWithData, AnimationEventName } from 'lottie-web';
 export { default as LottiePlayer } from 'lottie-web';
-import * as React from 'react';
-import React__default, { RefObject, MutableRefObject, AnimationEventHandler, ReactElement } from 'react';
+import * as react from 'react';
+import react__default, { RefObject, MutableRefObject, AnimationEventHandler, ReactElement, CSSProperties } from 'react';
 
@@ -24,3 +24,4 @@ declare type LottieRefCurrentProps = {
 declare type LottieRef = MutableRefObject<LottieRefCurrentProps | null>;
-declare type LottieOptions = Omit<AnimationConfigWithData, "container"> & {
+declare type LottieOptions = Omit<AnimationConfigWithData, "container" | "animationData"> & {
+    animationData: unknown;
     lottieRef?: LottieRef;
@@ -37,19 +38,6 @@ onComplete?: AnimationEventHandler | null;
     onDestroy?: AnimationEventHandler | null;
-} & React__default.HTMLProps<HTMLDivElement>;
+} & Omit<react__default.HTMLProps<HTMLDivElement>, 'loop'>;
 declare type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
     animationData?: LottieOptions["animationData"];
 };
-declare type LottieComponentProps = LottieOptions & React__default.HTMLProps<HTMLDivElement> & {
-    interactivity?: Omit<InteractivityProps, "lottieObj">;
-};
-declare type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
-    animationData?: LottieOptions["animationData"];
-};
-declare type Listener = {
-    name: AnimationEventName;
-    handler: AnimationEventHandler;
-};
-declare type PartialListener = Omit<Listener, "handler"> & {
-    handler?: Listener["handler"] | null;
-};
 declare type Axis = "x" | "y";
@@ -72,6 +60,19 @@ declare type Position = {
 };
+declare type LottieComponentProps = LottieOptions & {
+    interactivity?: Omit<InteractivityProps, "lottieObj">;
+};
+declare type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
+    animationData?: LottieOptions["animationData"];
+};
+declare type Listener = {
+    name: AnimationEventName;
+    handler: AnimationEventHandler;
+};
+declare type PartialListener = Omit<Listener, "handler"> & {
+    handler?: Listener["handler"] | null;
+};
 
-declare const Lottie: (props: LottieComponentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Lottie: (props: LottieComponentProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 
-declare const useLottie: (props: LottieOptions, style?: React__default.CSSProperties | undefined) => {
+declare const useLottie: (props: LottieOptions, style?: CSSProperties) => {
     View: ReactElement;
@@ -82,5 +83,2 @@ } & LottieRefCurrentProps;
 
-declare const Animator: typeof Lottie;
-declare const useAnimator: typeof useLottie;
-
-export { Action, Animator, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, Lottie as default, useAnimator, useLottie, useLottieInteractivity };
+export { Action, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, Lottie as default, useLottie, useLottieInteractivity };

build/index.es.js

@@ -295,4 +295,6 @@ import lottie from 'lottie-web';
 
-    (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-    return;
+    (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Removing the reference to the animation so separate cleanups are skipped.
+    // Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
+
+    animationInstanceRef.current = undefined;
   };
@@ -330,26 +332,24 @@ /*
     animationInstanceRef.current = lottie.loadAnimation(config);
-    setAnimationLoaded(!!animationInstanceRef.current);
+    setAnimationLoaded(!!animationInstanceRef.current); // Return a function that will clean up
+
+    return function () {
+      var _a;
+
+      (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+      animationInstanceRef.current = undefined;
+    };
   };
   /**
-   * Initialize and listen for changes that affect the animation state
+   * (Re)Initialize when animation data changed
    */
-  // Reinitialize when animation data changed
 
 
   useEffect(function () {
-    loadAnimation();
-  }, [animationData]); // Update the loop state
+    var onUnmount = loadAnimation(); // Clean up on unmount
 
-  useEffect(function () {
-    if (!animationInstanceRef.current) {
-      return;
-    }
+    return function () {
+      return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animationData, loop]); // Update the autoplay state
 
-    animationInstanceRef.current.loop = !!loop;
-
-    if (loop && animationInstanceRef.current.isPaused) {
-      animationInstanceRef.current.play();
-    }
-  }, [loop]); // Update the autoplay state
-
   useEffect(function () {
@@ -370,3 +370,3 @@ if (!animationInstanceRef.current) {
     if (!initialSegment) {
-      animationInstanceRef.current.resetSegments(false);
+      animationInstanceRef.current.resetSegments(true);
       return;
@@ -521,3 +521,3 @@ } // If it's not a valid segment, do nothing
 
-    if (!wrapper || !animationItem) {
+    if (!wrapper || !animationItem || !actions.length) {
       return;
@@ -670,3 +670,4 @@ }
         return cursorModeHandler();
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [mode, animationItem]);
@@ -680,3 +681,4 @@ };
   var animationItem = lottieObj.animationItem,
-      View = lottieObj.View;
+      View = lottieObj.View,
+      animationContainerRef = lottieObj.animationContainerRef;
   useInitInteractivity({
@@ -686,3 +688,3 @@ actions: actions,
     mode: mode,
-    wrapperRef: lottieObj.animationContainerRef
+    wrapperRef: animationContainerRef
   });
@@ -695,3 +697,3 @@ return View;
 var Lottie = function Lottie(props) {
-  var _a;
+  var _a, _b, _c;
 
@@ -745,34 +747,29 @@ var style = props.style,
       };
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
-
-  if (interactivity) {
-    return useLottieInteractivity(_objectSpread2({
-      lottieObj: {
-        View: View,
-        play: play,
-        stop: stop,
-        pause: pause,
-        setSpeed: setSpeed,
-        goToAndStop: goToAndStop,
-        goToAndPlay: goToAndPlay,
-        setDirection: setDirection,
-        playSegments: playSegments,
-        setSubframe: setSubframe,
-        getDuration: getDuration,
-        destroy: destroy,
-        animationContainerRef: animationContainerRef,
-        animationLoaded: animationLoaded,
-        animationItem: animationItem
-      }
-    }, interactivity));
-  }
-
-  return View;
+  return useLottieInteractivity({
+    lottieObj: {
+      View: View,
+      play: play,
+      stop: stop,
+      pause: pause,
+      setSpeed: setSpeed,
+      goToAndStop: goToAndStop,
+      goToAndPlay: goToAndPlay,
+      setDirection: setDirection,
+      playSegments: playSegments,
+      setSubframe: setSubframe,
+      getDuration: getDuration,
+      destroy: destroy,
+      animationContainerRef: animationContainerRef,
+      animationLoaded: animationLoaded,
+      animationItem: animationItem
+    },
+    actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
+    mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
+  });
 };
 
-var Animator = Lottie;
-var useAnimator = useLottie;
-
-export { Animator, Lottie as default, useAnimator, useLottie, useLottieInteractivity };
+export { Lottie as default, useLottie, useLottieInteractivity };
 //# sourceMappingURL=index.es.js.map

build/index.es.min.js

@@ -1,2 +0,2 @@
-import e from"lottie-web";export{default as LottiePlayer}from"lottie-web";import t,{useState as n,useRef as r,useEffect as o}from"react";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],m=function(a,u){var c=a.animationData,m=a.loop,d=a.autoplay,p=a.initialSegment,y=a.onComplete,v=a.onLoopComplete,g=a.onEnterFrame,b=a.onSegmentStart,S=a.onConfigReady,h=a.onDataReady,O=a.onDataFailed,A=a.onLoadedImages,w=a.onDOMLoaded,D=a.onDestroy;a.lottieRef,a.renderer,a.name,a.assetsPath,a.rendererSettings;var P=l(a,f),j=s(n(!1),2),R=j[0],L=j[1],x=r(),E=r(null);return o((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=x.current)||void 0===t||t.destroy();var r=i(i(i({},a),n),{},{container:E.current});x.current=e.loadAnimation(r),L(!!x.current)}}()}),[c]),o((function(){x.current&&(x.current.loop=!!m,m&&x.current.isPaused&&x.current.play())}),[m]),o((function(){x.current&&(x.current.autoplay=!!d)}),[d]),o((function(){x.current&&(p?Array.isArray(p)&&p.length&&((x.current.currentRawFrame<p[0]||x.current.currentRawFrame>p[1])&&(x.current.currentRawFrame=p[0]),x.current.setSegment(p[0],p[1])):x.current.resetSegments(!1))}),[p]),o((function(){var e=[{name:"complete",handler:y},{name:"loopComplete",handler:v},{name:"enterFrame",handler:g},{name:"segmentStart",handler:b},{name:"config_ready",handler:S},{name:"data_ready",handler:h},{name:"data_failed",handler:O},{name:"loaded_images",handler:A},{name:"DOMLoaded",handler:w},{name:"destroy",handler:D}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=x.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=x.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[y,v,g,b,S,h,O,A,w,D]),{View:t.createElement("div",i({style:u,ref:E},P)),play:function(){var e;null===(e=x.current)||void 0===e||e.play()},stop:function(){var e;null===(e=x.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=x.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=x.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=x.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=x.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=x.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=x.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=x.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=x.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=x.current)||void 0===e||e.destroy()},animationContainerRef:E,animationLoaded:R,animationItem:x.current}};var d=function(e){var t=e.wrapperRef,n=e.animationItem,r=e.mode,a=e.actions;o((function(){var e=t.current;if(e&&n){n.stop();var o,i,u,l,s;switch(r){case"scroll":return l=null,s=function(){var t,r,o,i=(r=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-r)/(window.innerHeight+o)),u=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((i-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
-n.goToAndStop(s-n.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||n.isPaused)&&(n.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&n.isPaused&&(n.resetSegments(!0),n.play()),"stop"===u.type&&n.goToAndStop(u.frames[0]-n.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return o=function(t,r){var o,i,u,l,s=t,c=r;if(-1!==s&&-1!==c){var f=(o=s,i=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=f.x,c=f.y}var m=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(m){if("seek"===m.type&&m.position&&Array.isArray(m.position.x)&&Array.isArray(m.position.y)&&2===m.frames.length){var d=(s-m.position.x[0])/(m.position.x[1]-m.position.x[0]),p=(c-m.position.y[0])/(m.position.y[1]-m.position.y[0]);n.playSegments(m.frames,!0),n.goToAndStop(Math.ceil((d+p)/2*(m.frames[1]-m.frames[0])),!0)}"loop"===m.type&&n.playSegments(m.frames,!0),"play"===m.type&&(n.isPaused&&n.resetSegments(!1),n.playSegments(m.frames)),"stop"===m.type&&n.goToAndStop(m.frames[0],!0)}},i=function(e){o(e.clientX,e.clientY)},u=function(){o(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[r,n])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View;return d({actions:t,animationItem:o,mode:n,wrapperRef:r.animationContainerRef}),a},y=["style","interactivity"],v=function(e){var t,n=e.style,r=e.interactivity,a=l(e,y),u=m(a,n),s=u.View,c=u.play,f=u.stop,d=u.pause,v=u.setSpeed,g=u.goToAndStop,b=u.goToAndPlay,S=u.setDirection,h=u.playSegments,O=u.setSubframe,A=u.getDuration,w=u.destroy,D=u.animationContainerRef,P=u.animationLoaded,j=u.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:c,stop:f,pause:d,setSpeed:v,goToAndPlay:b,goToAndStop:g,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationContainerRef:D,animationLoaded:P,animationItem:j})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),r?p(i({lottieObj:{View:s,play:c,stop:f,pause:d,setSpeed:v,goToAndStop:g,goToAndPlay:b,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationContainerRef:D,animationLoaded:P,animationItem:j}},r)):s},g=v,b=m;export{g as Animator,v as default,b as useAnimator,m as useLottie,p as useLottieInteractivity};
+import e from"lottie-web";export{default as LottiePlayer}from"lottie-web";import t,{useState as n,useRef as r,useEffect as o}from"react";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var d=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],f=function(a,u){var c=a.animationData,f=a.loop,m=a.autoplay,p=a.initialSegment,y=a.onComplete,v=a.onLoopComplete,g=a.onEnterFrame,b=a.onSegmentStart,S=a.onConfigReady,h=a.onDataReady,O=a.onDataFailed,A=a.onLoadedImages,w=a.onDOMLoaded,D=a.onDestroy;a.lottieRef,a.renderer,a.name,a.assetsPath,a.rendererSettings;var P=l(a,d),j=s(n(!1),2),R=j[0],L=j[1],x=r(),E=r(null);return o((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=x.current)||void 0===t||t.destroy();var r=i(i(i({},a),n),{},{container:E.current});return x.current=e.loadAnimation(r),L(!!x.current),function(){var e;null===(e=x.current)||void 0===e||e.destroy(),x.current=void 0}}}();return function(){return null==t?void 0:t()}}),[c,f]),o((function(){x.current&&(x.current.autoplay=!!m)}),[m]),o((function(){x.current&&(p?Array.isArray(p)&&p.length&&((x.current.currentRawFrame<p[0]||x.current.currentRawFrame>p[1])&&(x.current.currentRawFrame=p[0]),x.current.setSegment(p[0],p[1])):x.current.resetSegments(!0))}),[p]),o((function(){var e=[{name:"complete",handler:y},{name:"loopComplete",handler:v},{name:"enterFrame",handler:g},{name:"segmentStart",handler:b},{name:"config_ready",handler:S},{name:"data_ready",handler:h},{name:"data_failed",handler:O},{name:"loaded_images",handler:A},{name:"DOMLoaded",handler:w},{name:"destroy",handler:D}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=x.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=x.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[y,v,g,b,S,h,O,A,w,D]),{View:t.createElement("div",i({style:u,ref:E},P)),play:function(){var e;null===(e=x.current)||void 0===e||e.play()},stop:function(){var e;null===(e=x.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=x.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=x.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=x.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=x.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=x.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=x.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=x.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=x.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=x.current)||void 0===e||e.destroy(),x.current=void 0},animationContainerRef:E,animationLoaded:R,animationItem:x.current}};var m=function(e){var t=e.wrapperRef,n=e.animationItem,r=e.mode,a=e.actions;o((function(){var e=t.current;if(e&&n&&a.length){n.stop();var o,i,u,l,s;switch(r){case"scroll":return l=null,s=function(){var t,r,o,i=(r=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-r)/(window.innerHeight+o)),u=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((i-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
+n.goToAndStop(s-n.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||n.isPaused)&&(n.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&n.isPaused&&(n.resetSegments(!0),n.play()),"stop"===u.type&&n.goToAndStop(u.frames[0]-n.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return o=function(t,r){var o,i,u,l,s=t,c=r;if(-1!==s&&-1!==c){var d=(o=s,i=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=d.x,c=d.y}var f=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(f){if("seek"===f.type&&f.position&&Array.isArray(f.position.x)&&Array.isArray(f.position.y)&&2===f.frames.length){var m=(s-f.position.x[0])/(f.position.x[1]-f.position.x[0]),p=(c-f.position.y[0])/(f.position.y[1]-f.position.y[0]);n.playSegments(f.frames,!0),n.goToAndStop(Math.ceil((m+p)/2*(f.frames[1]-f.frames[0])),!0)}"loop"===f.type&&n.playSegments(f.frames,!0),"play"===f.type&&(n.isPaused&&n.resetSegments(!1),n.playSegments(f.frames)),"stop"===f.type&&n.goToAndStop(f.frames[0],!0)}},i=function(e){o(e.clientX,e.clientY)},u=function(){o(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[r,n])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View,i=r.animationContainerRef;return m({actions:t,animationItem:o,mode:n,wrapperRef:i}),a},y=["style","interactivity"],v=function(e){var t,n,r,a=e.style,i=e.interactivity,u=l(e,y),s=f(u,a),c=s.View,d=s.play,m=s.stop,v=s.pause,g=s.setSpeed,b=s.goToAndStop,S=s.goToAndPlay,h=s.setDirection,O=s.playSegments,A=s.setSubframe,w=s.getDuration,D=s.destroy,P=s.animationContainerRef,j=s.animationLoaded,R=s.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:d,stop:m,pause:v,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:P,animationLoaded:j,animationItem:R})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),p({lottieObj:{View:c,play:d,stop:m,pause:v,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:P,animationLoaded:j,animationItem:R},actions:null!==(n=null==i?void 0:i.actions)&&void 0!==n?n:[],mode:null!==(r=null==i?void 0:i.mode)&&void 0!==r?r:"scroll"})};export{v as default,f as useLottie,p as useLottieInteractivity};

build/index.js

@@ -303,4 +303,6 @@ 'use strict';
 
-    (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-    return;
+    (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Removing the reference to the animation so separate cleanups are skipped.
+    // Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
+
+    animationInstanceRef.current = undefined;
   };
@@ -338,26 +340,24 @@ /*
     animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
-    setAnimationLoaded(!!animationInstanceRef.current);
+    setAnimationLoaded(!!animationInstanceRef.current); // Return a function that will clean up
+
+    return function () {
+      var _a;
+
+      (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+      animationInstanceRef.current = undefined;
+    };
   };
   /**
-   * Initialize and listen for changes that affect the animation state
+   * (Re)Initialize when animation data changed
    */
-  // Reinitialize when animation data changed
 
 
   React.useEffect(function () {
-    loadAnimation();
-  }, [animationData]); // Update the loop state
+    var onUnmount = loadAnimation(); // Clean up on unmount
 
-  React.useEffect(function () {
-    if (!animationInstanceRef.current) {
-      return;
-    }
+    return function () {
+      return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animationData, loop]); // Update the autoplay state
 
-    animationInstanceRef.current.loop = !!loop;
-
-    if (loop && animationInstanceRef.current.isPaused) {
-      animationInstanceRef.current.play();
-    }
-  }, [loop]); // Update the autoplay state
-
   React.useEffect(function () {
@@ -378,3 +378,3 @@ if (!animationInstanceRef.current) {
     if (!initialSegment) {
-      animationInstanceRef.current.resetSegments(false);
+      animationInstanceRef.current.resetSegments(true);
       return;
@@ -529,3 +529,3 @@ } // If it's not a valid segment, do nothing
 
-    if (!wrapper || !animationItem) {
+    if (!wrapper || !animationItem || !actions.length) {
       return;
@@ -678,3 +678,4 @@ }
         return cursorModeHandler();
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [mode, animationItem]);
@@ -688,3 +689,4 @@ };
   var animationItem = lottieObj.animationItem,
-      View = lottieObj.View;
+      View = lottieObj.View,
+      animationContainerRef = lottieObj.animationContainerRef;
   useInitInteractivity({
@@ -694,3 +696,3 @@ actions: actions,
     mode: mode,
-    wrapperRef: lottieObj.animationContainerRef
+    wrapperRef: animationContainerRef
   });
@@ -703,3 +705,3 @@ return View;
 var Lottie = function Lottie(props) {
-  var _a;
+  var _a, _b, _c;
 
@@ -753,33 +755,28 @@ var style = props.style,
       };
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
-
-  if (interactivity) {
-    return useLottieInteractivity(_objectSpread2({
-      lottieObj: {
-        View: View,
-        play: play,
-        stop: stop,
-        pause: pause,
-        setSpeed: setSpeed,
-        goToAndStop: goToAndStop,
-        goToAndPlay: goToAndPlay,
-        setDirection: setDirection,
-        playSegments: playSegments,
-        setSubframe: setSubframe,
-        getDuration: getDuration,
-        destroy: destroy,
-        animationContainerRef: animationContainerRef,
-        animationLoaded: animationLoaded,
-        animationItem: animationItem
-      }
-    }, interactivity));
-  }
-
-  return View;
+  return useLottieInteractivity({
+    lottieObj: {
+      View: View,
+      play: play,
+      stop: stop,
+      pause: pause,
+      setSpeed: setSpeed,
+      goToAndStop: goToAndStop,
+      goToAndPlay: goToAndPlay,
+      setDirection: setDirection,
+      playSegments: playSegments,
+      setSubframe: setSubframe,
+      getDuration: getDuration,
+      destroy: destroy,
+      animationContainerRef: animationContainerRef,
+      animationLoaded: animationLoaded,
+      animationItem: animationItem
+    },
+    actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
+    mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
+  });
 };
 
-var Animator = Lottie;
-var useAnimator = useLottie;
-
 Object.defineProperty(exports, 'LottiePlayer', {
@@ -789,7 +786,5 @@ enumerable: true,
 });
-exports.Animator = Animator;
 exports["default"] = Lottie;
-exports.useAnimator = useAnimator;
 exports.useLottie = useLottie;
 exports.useLottieInteractivity = useLottieInteractivity;
 //# sourceMappingURL=index.js.map

build/index.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lottie-web"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),o=n(t);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],d=function(e,n){var a=e.animationData,u=e.loop,c=e.autoplay,d=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,A=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var w=l(e,f),D=s(t.useState(!1),2),P=D[0],j=D[1],E=t.useRef(),R=t.useRef(null);return t.useEffect((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(R.current){null===(t=E.current)||void 0===t||t.destroy();var o=i(i(i({},e),n),{},{container:R.current});E.current=r.default.loadAnimation(o),j(!!E.current)}}()}),[a]),t.useEffect((function(){E.current&&(E.current.loop=!!u,u&&E.current.isPaused&&E.current.play())}),[u]),t.useEffect((function(){E.current&&(E.current.autoplay=!!c)}),[c]),t.useEffect((function(){E.current&&(d?Array.isArray(d)&&d.length&&((E.current.currentRawFrame<d[0]||E.current.currentRawFrame>d[1])&&(E.current.currentRawFrame=d[0]),E.current.setSegment(d[0],d[1])):E.current.resetSegments(!1))}),[d]),t.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{name:"destroy",handler:A}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=E.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=E.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,A]),{View:o.default.createElement("div",i({style:n,ref:R},w)),play:function(){var e;null===(e=E.current)||void 0===e||e.play()},stop:function(){var e;null===(e=E.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=E.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=E.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=E.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=E.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=E.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=E.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=E.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=E.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=E.current)||void 0===e||e.destroy()},animationContainerRef:R,animationLoaded:P,animationItem:E.current}};var m=function(e){var n=e.wrapperRef,r=e.animationItem,o=e.mode,a=e.actions;t.useEffect((function(){var e=n.current;if(e&&r){r.stop();var t,i,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,i=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((i-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
-r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||r.isPaused)&&(r.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===u.type&&r.goToAndStop(u.frames[0]-r.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return t=function(t,n){var o,i,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,i=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=f.x,c=f.y}var d=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/2*(d.frames[1]-d.frames[0])),!0)}"loop"===d.type&&r.playSegments(d.frames,!0),"play"===d.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(d.frames)),"stop"===d.type&&r.goToAndStop(d.frames[0],!0)}},i=function(e){t(e.clientX,e.clientY)},u=function(){t(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[o,r])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View;return m({actions:t,animationItem:o,mode:n,wrapperRef:r.animationContainerRef}),a},y=["style","interactivity"],v=function(e){var n,r=e.style,o=e.interactivity,a=l(e,y),u=d(a,r),s=u.View,c=u.play,f=u.stop,m=u.pause,v=u.setSpeed,g=u.goToAndStop,b=u.goToAndPlay,S=u.setDirection,h=u.playSegments,O=u.setSubframe,A=u.getDuration,w=u.destroy,D=u.animationContainerRef,P=u.animationLoaded,j=u.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:c,stop:f,pause:m,setSpeed:v,goToAndPlay:b,goToAndStop:g,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationContainerRef:D,animationLoaded:P,animationItem:j})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),o?p(i({lottieObj:{View:s,play:c,stop:f,pause:m,setSpeed:v,goToAndStop:g,goToAndPlay:b,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationContainerRef:D,animationLoaded:P,animationItem:j}},o)):s},g=v,b=d;Object.defineProperty(exports,"LottiePlayer",{enumerable:!0,get:function(){return r.default}}),exports.Animator=g,exports.default=v,exports.useAnimator=b,exports.useLottie=d,exports.useLottieInteractivity=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lottie-web"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),o=n(t);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],d=function(e,n){var a=e.animationData,u=e.loop,c=e.autoplay,d=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,A=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var w=l(e,f),D=s(t.useState(!1),2),j=D[0],P=D[1],R=t.useRef(),E=t.useRef(null);return t.useEffect((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=R.current)||void 0===t||t.destroy();var o=i(i(i({},e),n),{},{container:E.current});return R.current=r.default.loadAnimation(o),P(!!R.current),function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0}}}();return function(){return null==t?void 0:t()}}),[a,u]),t.useEffect((function(){R.current&&(R.current.autoplay=!!c)}),[c]),t.useEffect((function(){R.current&&(d?Array.isArray(d)&&d.length&&((R.current.currentRawFrame<d[0]||R.current.currentRawFrame>d[1])&&(R.current.currentRawFrame=d[0]),R.current.setSegment(d[0],d[1])):R.current.resetSegments(!0))}),[d]),t.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{name:"destroy",handler:A}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=R.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=R.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,A]),{View:o.default.createElement("div",i({style:n,ref:E},w)),play:function(){var e;null===(e=R.current)||void 0===e||e.play()},stop:function(){var e;null===(e=R.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=R.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=R.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=R.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=R.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=R.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=R.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0},animationContainerRef:E,animationLoaded:j,animationItem:R.current}};var m=function(e){var n=e.wrapperRef,r=e.animationItem,o=e.mode,a=e.actions;t.useEffect((function(){var e=n.current;if(e&&r&&a.length){r.stop();var t,i,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,i=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((i-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
+r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||r.isPaused)&&(r.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===u.type&&r.goToAndStop(u.frames[0]-r.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return t=function(t,n){var o,i,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,i=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=f.x,c=f.y}var d=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/2*(d.frames[1]-d.frames[0])),!0)}"loop"===d.type&&r.playSegments(d.frames,!0),"play"===d.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(d.frames)),"stop"===d.type&&r.goToAndStop(d.frames[0],!0)}},i=function(e){t(e.clientX,e.clientY)},u=function(){t(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[o,r])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View,i=r.animationContainerRef;return m({actions:t,animationItem:o,mode:n,wrapperRef:i}),a},y=["style","interactivity"];Object.defineProperty(exports,"LottiePlayer",{enumerable:!0,get:function(){return r.default}}),exports.default=function(e){var n,r,o,a=e.style,i=e.interactivity,u=l(e,y),s=d(u,a),c=s.View,f=s.play,m=s.stop,v=s.pause,g=s.setSpeed,b=s.goToAndStop,S=s.goToAndPlay,h=s.setDirection,O=s.playSegments,A=s.setSubframe,w=s.getDuration,D=s.destroy,j=s.animationContainerRef,P=s.animationLoaded,R=s.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:m,pause:v,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:j,animationLoaded:P,animationItem:R})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),p({lottieObj:{View:c,play:f,stop:m,pause:v,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:j,animationLoaded:P,animationItem:R},actions:null!==(r=null==i?void 0:i.actions)&&void 0!==r?r:[],mode:null!==(o=null==i?void 0:i.mode)&&void 0!==o?o:"scroll"})},exports.useLottie=d,exports.useLottieInteractivity=p;

build/index.umd.js

@@ -302,4 +302,6 @@ (function (global, factory) {
 
-      (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-      return;
+      (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Removing the reference to the animation so separate cleanups are skipped.
+      // Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
+
+      animationInstanceRef.current = undefined;
     };
@@ -337,26 +339,24 @@ /*
       animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
-      setAnimationLoaded(!!animationInstanceRef.current);
+      setAnimationLoaded(!!animationInstanceRef.current); // Return a function that will clean up
+
+      return function () {
+        var _a;
+
+        (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+        animationInstanceRef.current = undefined;
+      };
     };
     /**
-     * Initialize and listen for changes that affect the animation state
+     * (Re)Initialize when animation data changed
      */
-    // Reinitialize when animation data changed
 
 
     React.useEffect(function () {
-      loadAnimation();
-    }, [animationData]); // Update the loop state
+      var onUnmount = loadAnimation(); // Clean up on unmount
 
-    React.useEffect(function () {
-      if (!animationInstanceRef.current) {
-        return;
-      }
+      return function () {
+        return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationData, loop]); // Update the autoplay state
 
-      animationInstanceRef.current.loop = !!loop;
-
-      if (loop && animationInstanceRef.current.isPaused) {
-        animationInstanceRef.current.play();
-      }
-    }, [loop]); // Update the autoplay state
-
     React.useEffect(function () {
@@ -377,3 +377,3 @@ if (!animationInstanceRef.current) {
       if (!initialSegment) {
-        animationInstanceRef.current.resetSegments(false);
+        animationInstanceRef.current.resetSegments(true);
         return;
@@ -528,3 +528,3 @@ } // If it's not a valid segment, do nothing
 
-      if (!wrapper || !animationItem) {
+      if (!wrapper || !animationItem || !actions.length) {
         return;
@@ -677,3 +677,4 @@ }
           return cursorModeHandler();
-      }
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, [mode, animationItem]);
@@ -687,3 +688,4 @@ };
     var animationItem = lottieObj.animationItem,
-        View = lottieObj.View;
+        View = lottieObj.View,
+        animationContainerRef = lottieObj.animationContainerRef;
     useInitInteractivity({
@@ -693,3 +695,3 @@ actions: actions,
       mode: mode,
-      wrapperRef: lottieObj.animationContainerRef
+      wrapperRef: animationContainerRef
     });
@@ -702,3 +704,3 @@ return View;
   var Lottie = function Lottie(props) {
-    var _a;
+    var _a, _b, _c;
 
@@ -752,33 +754,28 @@ var style = props.style,
         };
-      }
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
-
-    if (interactivity) {
-      return useLottieInteractivity(_objectSpread2({
-        lottieObj: {
-          View: View,
-          play: play,
-          stop: stop,
-          pause: pause,
-          setSpeed: setSpeed,
-          goToAndStop: goToAndStop,
-          goToAndPlay: goToAndPlay,
-          setDirection: setDirection,
-          playSegments: playSegments,
-          setSubframe: setSubframe,
-          getDuration: getDuration,
-          destroy: destroy,
-          animationContainerRef: animationContainerRef,
-          animationLoaded: animationLoaded,
-          animationItem: animationItem
-        }
-      }, interactivity));
-    }
-
-    return View;
+    return useLottieInteractivity({
+      lottieObj: {
+        View: View,
+        play: play,
+        stop: stop,
+        pause: pause,
+        setSpeed: setSpeed,
+        goToAndStop: goToAndStop,
+        goToAndPlay: goToAndPlay,
+        setDirection: setDirection,
+        playSegments: playSegments,
+        setSubframe: setSubframe,
+        getDuration: getDuration,
+        destroy: destroy,
+        animationContainerRef: animationContainerRef,
+        animationLoaded: animationLoaded,
+        animationItem: animationItem
+      },
+      actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
+      mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
+    });
   };
 
-  var Animator = Lottie;
-  var useAnimator = useLottie;
-
   Object.defineProperty(exports, 'LottiePlayer', {
@@ -788,5 +785,3 @@ enumerable: true,
   });
-  exports.Animator = Animator;
   exports["default"] = Lottie;
-  exports.useAnimator = useAnimator;
   exports.useLottie = useLottie;
@@ -793,0 +788,0 @@ exports.useLottieInteractivity = useLottieInteractivity;

build/index.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lottie-web"),require("react")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["lottie-react"]={},e.Lottie,e.React)}(this,(function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),a=r(n);function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var d=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],m=function(e,t){var r=e.animationData,i=e.loop,l=e.autoplay,f=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,A=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var w=s(e,d),j=c(n.useState(!1),2),D=j[0],P=j[1],R=n.useRef(),E=n.useRef(null);return n.useEffect((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=R.current)||void 0===t||t.destroy();var r=u(u(u({},e),n),{},{container:E.current});R.current=o.default.loadAnimation(r),P(!!R.current)}}()}),[r]),n.useEffect((function(){R.current&&(R.current.loop=!!i,i&&R.current.isPaused&&R.current.play())}),[i]),n.useEffect((function(){R.current&&(R.current.autoplay=!!l)}),[l]),n.useEffect((function(){R.current&&(f?Array.isArray(f)&&f.length&&((R.current.currentRawFrame<f[0]||R.current.currentRawFrame>f[1])&&(R.current.currentRawFrame=f[0]),R.current.setSegment(f[0],f[1])):R.current.resetSegments(!1))}),[f]),n.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{name:"destroy",handler:A}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=R.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=R.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,A]),{View:a.default.createElement("div",u({style:t,ref:E},w)),play:function(){var e;null===(e=R.current)||void 0===e||e.play()},stop:function(){var e;null===(e=R.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=R.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=R.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=R.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=R.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=R.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=R.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=R.current)||void 0===e||e.destroy()},animationContainerRef:E,animationLoaded:D,animationItem:R.current}};var p=function(e){var t=e.wrapperRef,r=e.animationItem,o=e.mode,a=e.actions;n.useEffect((function(){var e=t.current;if(e&&r){r.stop();var n,i,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,i=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((i-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
-r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||r.isPaused)&&(r.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===u.type&&r.goToAndStop(u.frames[0]-r.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return n=function(t,n){var o,i,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,i=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=f.x,c=f.y}var d=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/2*(d.frames[1]-d.frames[0])),!0)}"loop"===d.type&&r.playSegments(d.frames,!0),"play"===d.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(d.frames)),"stop"===d.type&&r.goToAndStop(d.frames[0],!0)}},i=function(e){n(e.clientX,e.clientY)},u=function(){n(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[o,r])},y=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View;return p({actions:t,animationItem:o,mode:n,wrapperRef:r.animationContainerRef}),a},v=["style","interactivity"],g=function(e){var t,r=e.style,o=e.interactivity,a=s(e,v),i=m(a,r),l=i.View,c=i.play,f=i.stop,d=i.pause,p=i.setSpeed,g=i.goToAndStop,b=i.goToAndPlay,S=i.setDirection,h=i.playSegments,O=i.setSubframe,A=i.getDuration,w=i.destroy,j=i.animationContainerRef,D=i.animationLoaded,P=i.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:c,stop:f,pause:d,setSpeed:p,goToAndPlay:b,goToAndStop:g,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationContainerRef:j,animationLoaded:D,animationItem:P})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),o?y(u({lottieObj:{View:l,play:c,stop:f,pause:d,setSpeed:p,goToAndStop:g,goToAndPlay:b,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationContainerRef:j,animationLoaded:D,animationItem:P}},o)):l},b=g,S=m;Object.defineProperty(e,"LottiePlayer",{enumerable:!0,get:function(){return o.default}}),e.Animator=b,e.default=g,e.useAnimator=S,e.useLottie=m,e.useLottieInteractivity=y,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lottie-web"),require("react")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["lottie-react"]={},e.Lottie,e.React)}(this,(function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),i=r(n);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],a=!0,u=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(u)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var d=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],m=function(e,t){var r=e.animationData,a=e.loop,l=e.autoplay,f=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,A=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var w=s(e,d),j=c(n.useState(!1),2),D=j[0],P=j[1],R=n.useRef(),L=n.useRef(null);return n.useEffect((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(L.current){null===(t=R.current)||void 0===t||t.destroy();var r=u(u(u({},e),n),{},{container:L.current});return R.current=o.default.loadAnimation(r),P(!!R.current),function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0}}}();return function(){return null==t?void 0:t()}}),[r,a]),n.useEffect((function(){R.current&&(R.current.autoplay=!!l)}),[l]),n.useEffect((function(){R.current&&(f?Array.isArray(f)&&f.length&&((R.current.currentRawFrame<f[0]||R.current.currentRawFrame>f[1])&&(R.current.currentRawFrame=f[0]),R.current.setSegment(f[0],f[1])):R.current.resetSegments(!0))}),[f]),n.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{name:"destroy",handler:A}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=R.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=R.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,A]),{View:i.default.createElement("div",u({style:t,ref:L},w)),play:function(){var e;null===(e=R.current)||void 0===e||e.play()},stop:function(){var e;null===(e=R.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=R.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=R.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=R.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=R.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=R.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=R.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0},animationContainerRef:L,animationLoaded:D,animationItem:R.current}};var p=function(e){var t=e.wrapperRef,r=e.animationItem,o=e.mode,i=e.actions;n.useEffect((function(){var e=t.current;if(e&&r&&i.length){r.stop();var n,a,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,a=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=i.find((function(e){var t=e.visibility;return t&&a>=t[0]&&a<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((a-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
+r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||r.isPaused)&&(r.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===u.type&&r.goToAndStop(u.frames[0]-r.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return n=function(t,n){var o,a,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,a=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(a-l)/u.height});s=f.x,c=f.y}var d=i.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/2*(d.frames[1]-d.frames[0])),!0)}"loop"===d.type&&r.playSegments(d.frames,!0),"play"===d.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(d.frames)),"stop"===d.type&&r.goToAndStop(d.frames[0],!0)}},a=function(e){n(e.clientX,e.clientY)},u=function(){n(-1,-1)},e.addEventListener("mousemove",a),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",a),e.removeEventListener("mouseout",u)}}}}),[o,r])},y=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,i=r.View,a=r.animationContainerRef;return p({actions:t,animationItem:o,mode:n,wrapperRef:a}),i},v=["style","interactivity"];Object.defineProperty(e,"LottiePlayer",{enumerable:!0,get:function(){return o.default}}),e.default=function(e){var t,r,o,i=e.style,a=e.interactivity,u=s(e,v),l=m(u,i),c=l.View,f=l.play,d=l.stop,p=l.pause,g=l.setSpeed,b=l.goToAndStop,S=l.goToAndPlay,h=l.setDirection,O=l.playSegments,A=l.setSubframe,w=l.getDuration,j=l.destroy,D=l.animationContainerRef,P=l.animationLoaded,R=l.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:d,pause:p,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:j,animationContainerRef:D,animationLoaded:P,animationItem:R})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),y({lottieObj:{View:c,play:f,stop:d,pause:p,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:j,animationContainerRef:D,animationLoaded:P,animationItem:R},actions:null!==(r=null==a?void 0:a.actions)&&void 0!==r?r:[],mode:null!==(o=null==a?void 0:a.mode)&&void 0!==o?o:"scroll"})},e.useLottie=m,e.useLottieInteractivity=y,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "lottie-react",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Lottie for React",
@@ -51,3 +51,3 @@ "keywords": [
   "dependencies": {
-    "lottie-web": "^5.8.1"
+    "lottie-web": "^5.9.4"
   },
@@ -65,4 +65,6 @@ "devDependencies": {
     "@types/jest": "^27.4.0",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "autoprefixer": "^10.4.2",
@@ -72,10 +74,10 @@ "babel-loader": "^8.2.3",
     "docz": "^2.3.1",
-    "eslint": "^8.7.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "get-pkg-repo": "^5.0.0",
@@ -87,5 +89,5 @@ "gh-pages": "^3.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-test-renderer": "^17.0.2",
@@ -101,3 +103,3 @@ "rollup": "^2.64.0",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
@@ -104,0 +106,0 @@ "peerDependencies": {

README.md

@@ -7,51 +7,45 @@ # lottie-react
 
-> 👩‍💻 `v3` is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress unde the `v3` branch. And of course, you are encouraged to contribute. :)
-
-> 🙋‍♂️ Are you using `lottie-react` in production? Please send us a message with your website, feature requests and recommendations at: [[e-mail]](mailto:[e-mail]).
-
-
 ## Installation
 
-Install **react**, **react-dom** if you don’t have them already:
+1. Make sure you have the peer-dependencies installed: `react` and `react-dom`.
 
-_**Note:** This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
+    > _**Note:** This library is using React Hooks so the **minimum** version required for both **react** and **react-dom** is **v16.8.0**._
 
-```shell
-yarn add react@^16.8.0 react-dom@^16.8.0
-```
+2. Install `lottie-react` using **yarn**
 
-Install **lottie-react** using npm:
+    ```shell
+    yarn add lottie-react
+    ```
+   
+    or **npm**
 
-```shell
-yarn add lottie-react
-```
+    ```shell
+    npm i lottie-react
+    ```
 
 ## Usage
 
-### Component
+### Using the component ([try it](https://codesandbox.io/s/lottie-react-component-2k13t))
 
 ```tsx
+import React from "react";
 import Lottie from "lottie-react";
 import groovyWalkAnimation from "./groovyWalk.json";
 
-const Example = () => {
-  return <Lottie animationData={groovyWalkAnimation} />;
-};
+const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;
 
-export default Example;
+export default App;
 ```
 
-[Try it on CodeSandbox](https://codesandbox.io/s/lottie-react-component-2k13t)
+### Using the Hook ([try it](https://codesandbox.io/s/lottie-react-hook-13nio))
 
-### Hook
-
-```ts
+```tsx
+import React from "react";
 import { useLottie } from "lottie-react";
 import groovyWalkAnimation from "./groovyWalk.json";
 
-const Example = () => {
+const App = () => {
   const options = {
     animationData: groovyWalkAnimation,
-    loop: true,
-    autoplay: true,
+    loop: true
   };
@@ -61,18 +55,15 @@
 
-  return View;
+  return <>{View}</>;
 };
 
-export default Example;
+export default App;
 ```
 
-[Try it on CodeSandbox](https://codesandbox.io/s/lottie-react-hook-13nio)
+### 📄 Documentation
 
-## Documentation
+Checkout the [**documentation**](https://lottiereact.com) at [**https://lottiereact.com**](https://lottiereact.com) for more information and examples.
 
-Checkout the [Documentation](https://lottiereact.com) for more information and examples: [lottiereact.com](https://lottiereact.com)
+## Tests
 
-## Test
-```text
-yarn test
-```
+Run the tests using the `yarn test` command.
 
@@ -95,11 +86,15 @@ ### Coverage report
 
-Let us know if you have any suggestions or contributions. This package has the mission to help developers, so if you have any features that you think we should prioritize, reach out to us.
+Any **questions** or **suggestions**? Use the [**Discussions**](https://github.com/github/docs/discussions) tab. Any **issues**? Don't hesitate to document it in the [**Issues**](https://github.com/Gamote/lottie-react/issues) tab, and we will do our best to investigate it and fix it. Any **solutions**? You are very welcomed to open a [**pull request**](https://github.com/Gamote/lottie-react/pulls).
 
+> 👩‍💻 `v3` is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under the `v3` branch. And of course, you are encouraged to contribute. :)
+
+Thank you for investing your time in contributing to our project! ✨
+
 ## Projects to check out
 
-- [lottie-web](https://github.com/airbnb/lottie-web) - Lottie implementation for Web. Our project is based on it and you should check it because it will help you understand what's behind this package and it will give you a better understanding on what features should you expect to have in the future.
+- [lottie-web](https://github.com/airbnb/lottie-web) - Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
 - [lottie-android](https://github.com/airbnb/lottie-android) - Lottie implementation for Android
 - [lottie-ios](https://github.com/airbnb/lottie-ios) - Lottie implementation for iOS
 - [lottie-react-native](https://github.com/react-native-community/lottie-react-native) - Lottie implementation for React Native
-- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations? LottieFiles is the way to go!
+- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations files? LottieFiles has a lot of them!
 
@@ -106,0 +101,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

227845

increased by2%

Worsened metrics

Dev dependency count

46

increased by4.55%

Lines of code

2055

decreased by-0.63%

Number of lines in readme file

103

decreased by-4.63%

Dependency changes

• Updatedlottie-web@^5.9.4