New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

lottie-react

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lottie-react - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

63

build/index.d.ts
/// <reference types="react" />
import { AnimationDirection, AnimationSegment, AnimationItem, SVGRendererConfig, CanvasRendererConfig, HTMLRendererConfig, AnimationEventName } from 'lottie-web';
import { AnimationDirection, AnimationSegment, AnimationItem, AnimationConfigWithData, AnimationEventName } from 'lottie-web';
export { default as LottiePlayer } from 'lottie-web';
import React, { MutableRefObject, AnimationEventHandler, ReactElement } from 'react';
import { Validator, InferProps, Requireable } from 'prop-types';
import * as React from 'react';
import React__default, { MutableRefObject, AnimationEventHandler, ReactElement } from 'react';

@@ -23,12 +23,3 @@ declare type LottieRefCurrentProps = {

declare type LottieRef = MutableRefObject<LottieRefCurrentProps | null>;
declare type LottieOptions = {
animationData: object;
renderer?: "svg" | "canvas" | "html";
loop?: boolean | number;
autoplay?: boolean;
name?: string;
assetsPath?: string;
rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig;
initialSegment?: AnimationSegment;
} & {
declare type LottieOptions = AnimationConfigWithData & {
lottieRef?: LottieRef;

@@ -45,7 +36,7 @@ onComplete?: AnimationEventHandler | null;

onDestroy?: AnimationEventHandler | null;
} & React.HTMLProps<HTMLDivElement>;
} & React__default.HTMLProps<HTMLDivElement>;
declare type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
animationData?: LottieOptions["animationData"];
};
declare type LottieComponentProps = LottieOptions & React.HTMLProps<HTMLDivElement> & {
declare type LottieComponentProps = LottieOptions & React__default.HTMLProps<HTMLDivElement> & {
interactivity?: Omit<InteractivityProps, "lottieObj">;

@@ -81,40 +72,5 @@ };

declare const Lottie: {
(props: LottieComponentProps): ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
propTypes: {
animationData: Validator<InferProps<any>>;
loop: Requireable<number | boolean>;
autoplay: Requireable<boolean>;
initialSegment: Requireable<number[]>;
onComplete: Requireable<(...args: any[]) => any>;
onLoopComplete: Requireable<(...args: any[]) => any>;
onEnterFrame: Requireable<(...args: any[]) => any>;
onSegmentStart: Requireable<(...args: any[]) => any>;
onConfigReady: Requireable<(...args: any[]) => any>;
onDataReady: Requireable<(...args: any[]) => any>;
onDataFailed: Requireable<(...args: any[]) => any>;
onLoadedImages: Requireable<(...args: any[]) => any>;
onDOMLoaded: Requireable<(...args: any[]) => any>;
onDestroy: Requireable<(...args: any[]) => any>;
style: Requireable<InferProps<any>>;
};
defaultProps: {
loop: boolean;
autoplay: boolean;
initialSegment: null;
onComplete: null;
onLoopComplete: null;
onEnterFrame: null;
onSegmentStart: null;
onConfigReady: null;
onDataReady: null;
onDataFailed: null;
onLoadedImages: null;
onDOMLoaded: null;
onDestroy: null;
style: undefined;
};
};
declare const Lottie: (props: LottieComponentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
declare const useLottie: (props: LottieOptions, style?: React.CSSProperties | undefined) => {
declare const useLottie: (props: LottieOptions, style?: React__default.CSSProperties | undefined) => {
View: ReactElement;

@@ -128,3 +84,2 @@ } & LottieRefCurrentProps;

export default Lottie;
export { Action, Animator, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, useAnimator, useLottie, useLottieInteractivity };
export { Action, Animator, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, Lottie as default, useAnimator, useLottie, useLottieInteractivity };

174

build/index.es.js
import lottie from 'lottie-web';
export { default as LottiePlayer } from 'lottie-web';
import React, { useState, useRef, useEffect } from 'react';
import { shape, oneOfType, bool, number, arrayOf, func } from 'prop-types';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {

@@ -26,6 +10,5 @@ var keys = Object.keys(object);

var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
})), keys.push.apply(keys, symbols);
}

@@ -38,15 +21,8 @@

for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}

@@ -57,2 +33,17 @@

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -103,10 +94,13 @@ if (source == null) return {};

function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
var _s, _e;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);

@@ -151,2 +145,4 @@

var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
var useLottie = function useLottie(props, style) {

@@ -166,9 +162,9 @@ var animationData = props.animationData,

onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy,
lottieRef = props.lottieRef,
renderer = props.renderer,
name = props.name,
assetsPath = props.assetsPath,
rendererSettings = props.rendererSettings,
rest = _objectWithoutProperties(props, ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"]);
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);

@@ -341,4 +337,5 @@ var _useState = useState(false),

/**
* Initialize and listen for changes that need to reinitialize Lottie
* Initialize and listen for changes that affect the animation state
*/
// Reinitialize when animation data changed

@@ -348,3 +345,49 @@

loadAnimation();
}, [animationData, loop, autoplay, initialSegment]);
}, [animationData]); // Update the loop state
useEffect(function () {
if (!animationInstanceRef.current) {
return;
}
animationInstanceRef.current.loop = !!loop;
if (loop && animationInstanceRef.current.isPaused) {
animationInstanceRef.current.play();
}
}, [loop]); // Update the autoplay state
useEffect(function () {
if (!animationInstanceRef.current) {
return;
}
animationInstanceRef.current.autoplay = !!autoplay;
}, [autoplay]); // Update the initial segment state
useEffect(function () {
if (!animationInstanceRef.current) {
return;
} // When null should reset to default animation length
if (!initialSegment) {
animationInstanceRef.current.resetSegments(false);
return;
} // If it's not a valid segment, do nothing
if (!Array.isArray(initialSegment) || !initialSegment.length) {
return;
} // If the current position it's not in the new segment
// set the current position to start
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
animationInstanceRef.current.currentRawFrame = initialSegment[0];
} // Update the segment
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
}, [initialSegment]);
/*

@@ -428,3 +471,3 @@ ======================================

var View = /*#__PURE__*/React.createElement("div", Object.assign({
var View = /*#__PURE__*/React.createElement("div", _objectSpread2({
style: style,

@@ -652,2 +695,4 @@ ref: animationContainer

var _excluded = ["style", "interactivity"];
var Lottie = function Lottie(props) {

@@ -658,3 +703,3 @@ var _a;

interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, ["style", "interactivity"]);
lottieProps = _objectWithoutProperties(props, _excluded);
/**

@@ -730,41 +775,6 @@ * Initialize the 'useLottie' hook

Lottie.propTypes = {
animationData: shape(undefined).isRequired,
loop: oneOfType([bool, number]),
autoplay: bool,
initialSegment: arrayOf(number.isRequired),
onComplete: func,
onLoopComplete: func,
onEnterFrame: func,
onSegmentStart: func,
onConfigReady: func,
onDataReady: func,
onDataFailed: func,
onLoadedImages: func,
onDOMLoaded: func,
onDestroy: func,
style: shape(undefined)
};
Lottie.defaultProps = {
loop: true,
autoplay: true,
initialSegment: null,
onComplete: null,
onLoopComplete: null,
onEnterFrame: null,
onSegmentStart: null,
onConfigReady: null,
onDataReady: null,
onDataFailed: null,
onLoadedImages: null,
onDOMLoaded: null,
onDestroy: null,
style: undefined
};
var Animator = Lottie;
var useAnimator = useLottie;
export default Lottie;
export { Animator, useAnimator, useLottie, useLottieInteractivity };
export { Animator, Lottie as default, useAnimator, useLottie, useLottieInteractivity };
//# sourceMappingURL=index.es.js.map

4

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";import{shape as a,oneOfType as i,bool as l,number as u,arrayOf as s,func as d}from"prop-types";function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function f(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 y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(r=(i=l.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw a}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return v(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 v(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 v(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 g=function(a,i){var l=a.animationData,u=a.loop,s=a.autoplay,d=a.initialSegment,m=a.onComplete,c=a.onLoopComplete,v=a.onEnterFrame,g=a.onSegmentStart,S=a.onConfigReady,b=a.onDataReady,h=a.onDataFailed,O=a.onLoadedImages,D=a.onDOMLoaded,A=a.onDestroy,w=(a.lottieRef,a.renderer,a.name,a.assetsPath,a.rendererSettings,f(a,["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"])),L=y(n(!1),2),j=L[0],P=L[1],E=r(),R=r(null);return o((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 r=p(p(p({},a),n),{},{container:R.current});E.current=e.loadAnimation(r),P(!!E.current)}}()}),[l,u,s,d]),o((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:c},{name:"enterFrame",handler:v},{name:"segmentStart",handler:g},{name:"config_ready",handler:S},{name:"data_ready",handler:b},{name:"data_failed",handler:h},{name:"loaded_images",handler:O},{name:"DOMLoaded",handler:D},{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,c,v,g,S,b,h,O,D,A]),{View:t.createElement("div",Object.assign({style:i,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()},animationLoaded:j,animationItem:E.current}};var S=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,l,u,s;switch(r){case"scroll":return u=null,s=function(){var t,r,o,i=(t=e.getBoundingClientRect(),r=t.top,o=t.height,(window.innerHeight-r)/(window.innerHeight+o)),l=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(l){if("seek"===l.type&&l.visibility&&2===l.frames.length){var s=l.frames[0]+Math.ceil((i-l.visibility[0])/(l.visibility[1]-l.visibility[0])*l.frames[1]);//! goToAndStop must be relative to the start of the current segment
n.goToAndStop(s-n.firstFrame-1,!0)}"loop"===l.type&&(null===u||u!==l.frames||n.isPaused)&&(n.playSegments(l.frames,!0),u=l.frames),"play"===l.type&&n.isPaused&&(n.resetSegments(!0),n.play()),"stop"===l.type&&n.goToAndStop(l.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,l,u,s=t,d=r;if(-1!==s&&-1!==d){var m=(o=s,i=d,l=e.getBoundingClientRect(),u=l.top,{x:(o-l.left)/l.width,y:(i-u)/l.height});s=m.x,d=m.y}var c=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]&&d>=t.y[0]&&d<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&d===t.y}));if(c){if("seek"===c.type&&c.position&&Array.isArray(c.position.x)&&Array.isArray(c.position.y)&&2===c.frames.length){var p=(s-c.position.x[0])/(c.position.x[1]-c.position.x[0]),f=(d-c.position.y[0])/(c.position.y[1]-c.position.y[0]);n.playSegments(c.frames,!0),n.goToAndStop(Math.ceil((p+f)/2*(c.frames[1]-c.frames[0])),!0)}"loop"===c.type&&n.playSegments(c.frames,!0),"play"===c.type&&(n.isPaused&&n.resetSegments(!1),n.playSegments(c.frames)),"stop"===c.type&&n.goToAndStop(c.frames[0],!0)}},i=function(e){o(e.clientX,e.clientY)},l=function(){o(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",l),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",l)}}}}),[r,n])},b=function(e){var n=e.actions,o=e.mode,a=e.lottieObj,i=a.animationItem,l=a.View,u=r(null);return S({actions:n,animationItem:i,mode:o,wrapperRef:u}),t.createElement("div",{ref:u},l)},h=function(e){var t,n=e.style,r=e.interactivity,a=f(e,["style","interactivity"]),i=g(a,n),l=i.View,u=i.play,s=i.stop,d=i.pause,m=i.setSpeed,c=i.goToAndStop,y=i.goToAndPlay,v=i.setDirection,S=i.playSegments,h=i.setSubframe,O=i.getDuration,D=i.destroy,A=i.animationLoaded,w=i.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:u,stop:s,pause:d,setSpeed:m,goToAndPlay:y,goToAndStop:c,setDirection:v,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:w})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),r?b(p({lottieObj:{View:l,play:u,stop:s,pause:d,setSpeed:m,goToAndStop:c,goToAndPlay:y,setDirection:v,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:w}},r)):l};h.propTypes={animationData:a(void 0).isRequired,loop:i([l,u]),autoplay:l,initialSegment:s(u.isRequired),onComplete:d,onLoopComplete:d,onEnterFrame:d,onSegmentStart:d,onConfigReady:d,onDataReady:d,onDataFailed:d,onLoadedImages:d,onDOMLoaded:d,onDestroy:d,style:a(void 0)},h.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var O=h,D=g;export default h;export{O as Animator,D as useAnimator,g as useLottie,b 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),L=j[0],E=j[1],x=r(),R=r(null);return o((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(R.current){null===(t=x.current)||void 0===t||t.destroy();var r=i(i(i({},a),n),{},{container:R.current});x.current=e.loadAnimation(r),E(!!x.current)}}()}),[c]),o((function(){x.current&&(x.current.loop=!!f,f&&x.current.isPaused&&x.current.play())}),[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(!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:R},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()},animationLoaded:L,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){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 n=e.actions,o=e.mode,a=e.lottieObj,i=a.animationItem,u=a.View,l=r(null);return m({actions:n,animationItem:i,mode:o,wrapperRef:l}),t.createElement("div",{ref:l},u)},y=["style","interactivity"],v=function(e){var t,n=e.style,r=e.interactivity,a=l(e,y),u=f(a,n),s=u.View,c=u.play,d=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.animationLoaded,P=u.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:c,stop:d,pause:m,setSpeed:v,goToAndPlay:b,goToAndStop:g,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationLoaded:D,animationItem:P})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),r?p(i({lottieObj:{View:s,play:c,stop:d,pause:m,setSpeed:v,goToAndStop:g,goToAndPlay:b,setDirection:S,playSegments:h,setSubframe:O,getDuration:A,destroy:w,animationLoaded:D,animationItem:P}},r)):s},g=v,b=f;export{g as Animator,v as default,b as useAnimator,f as useLottie,p as useLottieInteractivity};

188

build/index.js

@@ -5,23 +5,9 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var lottie = _interopDefault(require('lottie-web'));
var lottie = require('lottie-web');
var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = require('prop-types');
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
return obj;
}
var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

@@ -33,6 +19,5 @@ function ownKeys(object, enumerableOnly) {

var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
})), keys.push.apply(keys, symbols);
}

@@ -45,15 +30,8 @@

for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}

@@ -64,2 +42,17 @@

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -110,10 +103,13 @@ if (source == null) return {};

function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
var _s, _e;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);

@@ -158,2 +154,4 @@

var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
var useLottie = function useLottie(props, style) {

@@ -173,9 +171,9 @@ var animationData = props.animationData,

onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy,
lottieRef = props.lottieRef,
renderer = props.renderer,
name = props.name,
assetsPath = props.assetsPath,
rendererSettings = props.rendererSettings,
rest = _objectWithoutProperties(props, ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"]);
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);

@@ -344,8 +342,9 @@ var _useState = React.useState(false),

animationInstanceRef.current = lottie.loadAnimation(config);
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current);
};
/**
* Initialize and listen for changes that need to reinitialize Lottie
* Initialize and listen for changes that affect the animation state
*/
// Reinitialize when animation data changed

@@ -355,3 +354,49 @@

loadAnimation();
}, [animationData, loop, autoplay, initialSegment]);
}, [animationData]); // Update the loop state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
}
animationInstanceRef.current.loop = !!loop;
if (loop && animationInstanceRef.current.isPaused) {
animationInstanceRef.current.play();
}
}, [loop]); // Update the autoplay state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
}
animationInstanceRef.current.autoplay = !!autoplay;
}, [autoplay]); // Update the initial segment state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
} // When null should reset to default animation length
if (!initialSegment) {
animationInstanceRef.current.resetSegments(false);
return;
} // If it's not a valid segment, do nothing
if (!Array.isArray(initialSegment) || !initialSegment.length) {
return;
} // If the current position it's not in the new segment
// set the current position to start
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
animationInstanceRef.current.currentRawFrame = initialSegment[0];
} // Update the segment
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
}, [initialSegment]);
/*

@@ -435,3 +480,3 @@ ======================================

var View = /*#__PURE__*/React__default.createElement("div", Object.assign({
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({
style: style,

@@ -654,3 +699,3 @@ ref: animationContainer

});
return /*#__PURE__*/React__default.createElement("div", {
return /*#__PURE__*/React__default["default"].createElement("div", {
ref: wrapperRef

@@ -660,2 +705,4 @@ }, View);

var _excluded = ["style", "interactivity"];
var Lottie = function Lottie(props) {

@@ -666,3 +713,3 @@ var _a;

interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, ["style", "interactivity"]);
lottieProps = _objectWithoutProperties(props, _excluded);
/**

@@ -738,42 +785,11 @@ * Initialize the 'useLottie' hook

Lottie.propTypes = {
animationData: PropTypes.shape(undefined).isRequired,
loop: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
autoplay: PropTypes.bool,
initialSegment: PropTypes.arrayOf(PropTypes.number.isRequired),
onComplete: PropTypes.func,
onLoopComplete: PropTypes.func,
onEnterFrame: PropTypes.func,
onSegmentStart: PropTypes.func,
onConfigReady: PropTypes.func,
onDataReady: PropTypes.func,
onDataFailed: PropTypes.func,
onLoadedImages: PropTypes.func,
onDOMLoaded: PropTypes.func,
onDestroy: PropTypes.func,
style: PropTypes.shape(undefined)
};
Lottie.defaultProps = {
loop: true,
autoplay: true,
initialSegment: null,
onComplete: null,
onLoopComplete: null,
onEnterFrame: null,
onSegmentStart: null,
onConfigReady: null,
onDataReady: null,
onDataFailed: null,
onLoadedImages: null,
onDOMLoaded: null,
onDestroy: null,
style: undefined
};
var Animator = Lottie;
var useAnimator = useLottie;
exports.LottiePlayer = lottie;
Object.defineProperty(exports, 'LottiePlayer', {
enumerable: true,
get: function () { return lottie__default["default"]; }
});
exports.Animator = Animator;
exports.default = Lottie;
exports["default"] = Lottie;
exports.useAnimator = useAnimator;

@@ -780,0 +796,0 @@ exports.useLottie = useLottie;

4

build/index.min.js

@@ -1,2 +0,2 @@

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("lottie-web")),n=require("react"),r=e(n),o=require("prop-types");function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}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){a(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){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){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(r=(i=u.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==u.return||u.return()}finally{if(o)throw a}}return n}(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=function(e,o){var a=e.animationData,i=e.loop,c=e.autoplay,d=e.initialSegment,f=e.onComplete,p=e.onLoopComplete,m=e.onEnterFrame,y=e.onSegmentStart,v=e.onConfigReady,g=e.onDataReady,b=e.onDataFailed,S=e.onLoadedImages,h=e.onDOMLoaded,O=e.onDestroy,D=(e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings,l(e,["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"])),A=s(n.useState(!1),2),L=A[0],w=A[1],j=n.useRef(),P=n.useRef(null);return n.useEffect((function(){!function(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(P.current){null===(n=j.current)||void 0===n||n.destroy();var o=u(u(u({},e),r),{},{container:P.current});j.current=t.loadAnimation(o),w(!!j.current)}}()}),[a,i,c,d]),n.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:p},{name:"enterFrame",handler:m},{name:"segmentStart",handler:y},{name:"config_ready",handler:v},{name:"data_ready",handler:g},{name:"data_failed",handler:b},{name:"loaded_images",handler:S},{name:"DOMLoaded",handler:h},{name:"destroy",handler:O}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=j.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=j.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[f,p,m,y,v,g,b,S,h,O]),{View:r.createElement("div",Object.assign({style:o,ref:P},D)),play:function(){var e;null===(e=j.current)||void 0===e||e.play()},stop:function(){var e;null===(e=j.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=j.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=j.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=j.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=j.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=j.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=j.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=j.current)||void 0===e||e.destroy()},animationLoaded:L,animationItem:j.current}};var f=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=(t=e.getBoundingClientRect(),n=t.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 d=(o=s,i=c,u=e.getBoundingClientRect(),l=u.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 p=(s-f.position.x[0])/(f.position.x[1]-f.position.x[0]),m=(c-f.position.y[0])/(f.position.y[1]-f.position.y[0]);r.playSegments(f.frames,!0),r.goToAndStop(Math.ceil((p+m)/2*(f.frames[1]-f.frames[0])),!0)}"loop"===f.type&&r.playSegments(f.frames,!0),"play"===f.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(f.frames)),"stop"===f.type&&r.goToAndStop(f.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])},p=function(e){var t=e.actions,o=e.mode,a=e.lottieObj,i=a.animationItem,u=a.View,l=n.useRef(null);return f({actions:t,animationItem:i,mode:o,wrapperRef:l}),r.createElement("div",{ref:l},u)},m=function(e){var t,r=e.style,o=e.interactivity,a=l(e,["style","interactivity"]),i=d(a,r),s=i.View,c=i.play,f=i.stop,m=i.pause,y=i.setSpeed,v=i.goToAndStop,g=i.goToAndPlay,b=i.setDirection,S=i.playSegments,h=i.setSubframe,O=i.getDuration,D=i.destroy,A=i.animationLoaded,L=i.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:c,stop:f,pause:m,setSpeed:y,goToAndPlay:g,goToAndStop:v,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),o?p(u({lottieObj:{View:s,play:c,stop:f,pause:m,setSpeed:y,goToAndStop:v,goToAndPlay:g,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L}},o)):s};m.propTypes={animationData:o.shape(void 0).isRequired,loop:o.oneOfType([o.bool,o.number]),autoplay:o.bool,initialSegment:o.arrayOf(o.number.isRequired),onComplete:o.func,onLoopComplete:o.func,onEnterFrame:o.func,onSegmentStart:o.func,onConfigReady:o.func,onDataReady:o.func,onDataFailed:o.func,onLoadedImages:o.func,onDOMLoaded:o.func,onDestroy:o.func,style:o.shape(void 0)},m.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var y=m,v=d;exports.LottiePlayer=t,exports.Animator=y,exports.default=m,exports.useAnimator=v,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),P=D[0],j=D[1],E=t.useRef(),L=t.useRef(null);return t.useEffect((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(L.current){null===(t=E.current)||void 0===t||t.destroy();var o=i(i(i({},e),n),{},{container:L.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:L},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()},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 n=e.actions,r=e.mode,a=e.lottieObj,i=a.animationItem,u=a.View,l=t.useRef(null);return m({actions:n,animationItem:i,mode:r,wrapperRef:l}),o.default.createElement("div",{ref:l},u)},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.animationLoaded,P=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,animationLoaded:D,animationItem:P})}),[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,animationLoaded:D,animationItem:P}},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;

195

build/index.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lottie-web'), require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['exports', 'lottie-web', 'react', 'prop-types'], factory) :
(global = global || self, factory(global['lottie-react'] = {}, global.Lottie, global.React, global.PropTypes));
}(this, (function (exports, lottie, React, PropTypes) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lottie-web'), require('react')) :
typeof define === 'function' && define.amd ? define(['exports', 'lottie-web', 'react'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["lottie-react"] = {}, global.Lottie, global.React));
})(this, (function (exports, lottie, React) { 'use strict';
lottie = lottie && Object.prototype.hasOwnProperty.call(lottie, 'default') ? lottie['default'] : lottie;
var React__default = 'default' in React ? React['default'] : React;
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
return obj;
}
function ownKeys(object, enumerableOnly) {

@@ -30,6 +17,5 @@ var keys = Object.keys(object);

var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
})), keys.push.apply(keys, symbols);
}

@@ -42,15 +28,8 @@

for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}

@@ -61,2 +40,17 @@

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -107,10 +101,13 @@ if (source == null) return {};

function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
var _s, _e;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);

@@ -155,2 +152,4 @@

var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
var useLottie = function useLottie(props, style) {

@@ -170,9 +169,9 @@ var animationData = props.animationData,

onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy,
lottieRef = props.lottieRef,
renderer = props.renderer,
name = props.name,
assetsPath = props.assetsPath,
rendererSettings = props.rendererSettings,
rest = _objectWithoutProperties(props, ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"]);
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);

@@ -341,8 +340,9 @@ var _useState = React.useState(false),

animationInstanceRef.current = lottie.loadAnimation(config);
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current);
};
/**
* Initialize and listen for changes that need to reinitialize Lottie
* Initialize and listen for changes that affect the animation state
*/
// Reinitialize when animation data changed

@@ -352,3 +352,49 @@

loadAnimation();
}, [animationData, loop, autoplay, initialSegment]);
}, [animationData]); // Update the loop state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
}
animationInstanceRef.current.loop = !!loop;
if (loop && animationInstanceRef.current.isPaused) {
animationInstanceRef.current.play();
}
}, [loop]); // Update the autoplay state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
}
animationInstanceRef.current.autoplay = !!autoplay;
}, [autoplay]); // Update the initial segment state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
} // When null should reset to default animation length
if (!initialSegment) {
animationInstanceRef.current.resetSegments(false);
return;
} // If it's not a valid segment, do nothing
if (!Array.isArray(initialSegment) || !initialSegment.length) {
return;
} // If the current position it's not in the new segment
// set the current position to start
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
animationInstanceRef.current.currentRawFrame = initialSegment[0];
} // Update the segment
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
}, [initialSegment]);
/*

@@ -432,3 +478,3 @@ ======================================

var View = /*#__PURE__*/React__default.createElement("div", Object.assign({
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({
style: style,

@@ -651,3 +697,3 @@ ref: animationContainer

});
return /*#__PURE__*/React__default.createElement("div", {
return /*#__PURE__*/React__default["default"].createElement("div", {
ref: wrapperRef

@@ -657,2 +703,4 @@ }, View);

var _excluded = ["style", "interactivity"];
var Lottie = function Lottie(props) {

@@ -663,3 +711,3 @@ var _a;

interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, ["style", "interactivity"]);
lottieProps = _objectWithoutProperties(props, _excluded);
/**

@@ -735,42 +783,11 @@ * Initialize the 'useLottie' hook

Lottie.propTypes = {
animationData: PropTypes.shape(undefined).isRequired,
loop: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
autoplay: PropTypes.bool,
initialSegment: PropTypes.arrayOf(PropTypes.number.isRequired),
onComplete: PropTypes.func,
onLoopComplete: PropTypes.func,
onEnterFrame: PropTypes.func,
onSegmentStart: PropTypes.func,
onConfigReady: PropTypes.func,
onDataReady: PropTypes.func,
onDataFailed: PropTypes.func,
onLoadedImages: PropTypes.func,
onDOMLoaded: PropTypes.func,
onDestroy: PropTypes.func,
style: PropTypes.shape(undefined)
};
Lottie.defaultProps = {
loop: true,
autoplay: true,
initialSegment: null,
onComplete: null,
onLoopComplete: null,
onEnterFrame: null,
onSegmentStart: null,
onConfigReady: null,
onDataReady: null,
onDataFailed: null,
onLoadedImages: null,
onDOMLoaded: null,
onDestroy: null,
style: undefined
};
var Animator = Lottie;
var useAnimator = useLottie;
exports.LottiePlayer = lottie;
Object.defineProperty(exports, 'LottiePlayer', {
enumerable: true,
get: function () { return lottie__default["default"]; }
});
exports.Animator = Animator;
exports.default = Lottie;
exports["default"] = Lottie;
exports.useAnimator = useAnimator;

@@ -782,3 +799,3 @@ exports.useLottie = useLottie;

})));
}));
//# sourceMappingURL=index.umd.js.map

4

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"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react","prop-types"],t):t((e=e||self)["lottie-react"]={},e.Lottie,e.React,e.PropTypes)}(this,(function(e,t,n,r){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var o="default"in n?n.default:n;function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}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 l(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){a(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 u(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){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(r=(i=l.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw a}}return n}(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 c=function(e,r){var a=e.animationData,i=e.loop,f=e.autoplay,c=e.initialSegment,d=e.onComplete,p=e.onLoopComplete,m=e.onEnterFrame,y=e.onSegmentStart,v=e.onConfigReady,g=e.onDataReady,b=e.onDataFailed,S=e.onLoadedImages,h=e.onDOMLoaded,O=e.onDestroy,D=(e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings,u(e,["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"])),A=s(n.useState(!1),2),L=A[0],w=A[1],j=n.useRef(),P=n.useRef(null);return n.useEffect((function(){!function(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(P.current){null===(n=j.current)||void 0===n||n.destroy();var o=l(l(l({},e),r),{},{container:P.current});j.current=t.loadAnimation(o),w(!!j.current)}}()}),[a,i,f,c]),n.useEffect((function(){var e=[{name:"complete",handler:d},{name:"loopComplete",handler:p},{name:"enterFrame",handler:m},{name:"segmentStart",handler:y},{name:"config_ready",handler:v},{name:"data_ready",handler:g},{name:"data_failed",handler:b},{name:"loaded_images",handler:S},{name:"DOMLoaded",handler:h},{name:"destroy",handler:O}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=j.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=j.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[d,p,m,y,v,g,b,S,h,O]),{View:o.createElement("div",Object.assign({style:r,ref:P},D)),play:function(){var e;null===(e=j.current)||void 0===e||e.play()},stop:function(){var e;null===(e=j.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=j.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=j.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=j.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=j.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=j.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=j.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=j.current)||void 0===e||e.destroy()},animationLoaded:L,animationItem:j.current}};var d=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,l,u,s;switch(o){case"scroll":return u=null,s=function(){var t,n,o,i=(t=e.getBoundingClientRect(),n=t.top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),l=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(l){if("seek"===l.type&&l.visibility&&2===l.frames.length){var s=l.frames[0]+Math.ceil((i-l.visibility[0])/(l.visibility[1]-l.visibility[0])*l.frames[1]);//! goToAndStop must be relative to the start of the current segment
r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===l.type&&(null===u||u!==l.frames||r.isPaused)&&(r.playSegments(l.frames,!0),u=l.frames),"play"===l.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===l.type&&r.goToAndStop(l.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,l,u,s=t,f=n;if(-1!==s&&-1!==f){var c=(o=s,i=f,l=e.getBoundingClientRect(),u=l.top,{x:(o-l.left)/l.width,y:(i-u)/l.height});s=c.x,f=c.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]&&f>=t.y[0]&&f<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&f===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 p=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),m=(f-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((p+m)/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)},l=function(){n(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",l),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",l)}}}}),[o,r])},p=function(e){var t=e.actions,r=e.mode,a=e.lottieObj,i=a.animationItem,l=a.View,u=n.useRef(null);return d({actions:t,animationItem:i,mode:r,wrapperRef:u}),o.createElement("div",{ref:u},l)},m=function(e){var t,r=e.style,o=e.interactivity,a=u(e,["style","interactivity"]),i=c(a,r),s=i.View,f=i.play,d=i.stop,m=i.pause,y=i.setSpeed,v=i.goToAndStop,g=i.goToAndPlay,b=i.setDirection,S=i.playSegments,h=i.setSubframe,O=i.getDuration,D=i.destroy,A=i.animationLoaded,L=i.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:d,pause:m,setSpeed:y,goToAndPlay:g,goToAndStop:v,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),o?p(l({lottieObj:{View:s,play:f,stop:d,pause:m,setSpeed:y,goToAndStop:v,goToAndPlay:g,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L}},o)):s};m.propTypes={animationData:r.shape(void 0).isRequired,loop:r.oneOfType([r.bool,r.number]),autoplay:r.bool,initialSegment:r.arrayOf(r.number.isRequired),onComplete:r.func,onLoopComplete:r.func,onEnterFrame:r.func,onSegmentStart:r.func,onConfigReady:r.func,onDataReady:r.func,onDataFailed:r.func,onLoadedImages:r.func,onDOMLoaded:r.func,onDestroy:r.func,style:r.shape(void 0)},m.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var y=m,v=c;e.LottiePlayer=t,e.Animator=y,e.default=m,e.useAnimator=v,e.useLottie=c,e.useLottieInteractivity=p,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),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],E=n.useRef(),L=n.useRef(null);return n.useEffect((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(L.current){null===(t=E.current)||void 0===t||t.destroy();var r=u(u(u({},e),n),{},{container:L.current});E.current=o.default.loadAnimation(r),P(!!E.current)}}()}),[r]),n.useEffect((function(){E.current&&(E.current.loop=!!i,i&&E.current.isPaused&&E.current.play())}),[i]),n.useEffect((function(){E.current&&(E.current.autoplay=!!l)}),[l]),n.useEffect((function(){E.current&&(f?Array.isArray(f)&&f.length&&((E.current.currentRawFrame<f[0]||E.current.currentRawFrame>f[1])&&(E.current.currentRawFrame=f[0]),E.current.setSegment(f[0],f[1])):E.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=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:a.default.createElement("div",u({style:t,ref:L},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()},animationLoaded:D,animationItem:E.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,r=e.mode,o=e.lottieObj,i=o.animationItem,u=o.View,l=n.useRef(null);return p({actions:t,animationItem:i,mode:r,wrapperRef:l}),a.default.createElement("div",{ref:l},u)},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.animationLoaded,D=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,animationLoaded:j,animationItem:D})}),[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,animationLoaded:j,animationItem:D}},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})}));

93

package.json
{
"name": "lottie-react",
"version": "2.1.0",
"version": "2.2.0",
"description": "Lottie for React",

@@ -15,3 +15,3 @@ "keywords": [

],
"homepage": "https://github.com/Gamote/lottie-react",
"homepage": "https://lottiereact.com",
"bugs": {

@@ -40,5 +40,6 @@ "url": "https://github.com/Gamote/lottie-react/issues"

"docz:build": "docz build",
"deploy:docs": "echo 'lottiereact.com' > ./docs-dist/CNAME && gh-pages -d docs-dist",
"docz:dev": "docz dev",
"docz:serve": "docz build && docz serve",
"prepublishOnly": "rm -rf build && npm run build",
"prepublishOnly": "rm -rf build && yarn build",
"rollup:compile": "rollup -c",

@@ -52,52 +53,54 @@ "rollup:compile:watch": "rollup -c -w",

"dependencies": {
"lottie-web": "^5.7.3"
"lottie-web": "^5.8.1"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@rollup/plugin-commonjs": "^13.0.0",
"@rollup/plugin-node-resolve": "^8.0.1",
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/react": "^10.3.0",
"@testing-library/react-hooks": "^3.3.0",
"@types/jest": "^26.0.0",
"@types/react": "^16.9.38",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"canvas": "^2.6.1",
"coveralls": "^3.1.0",
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@babel/preset-react": "^7.16.7",
"@jest/types": "^27.4.2",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
"@types/jest": "^27.4.0",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"autoprefixer": "^10.4.2",
"babel-loader": "^8.2.3",
"coveralls": "^3.1.1",
"docz": "^2.3.1",
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"jest": "^26.0.1",
"node-sass": "^4.14.1",
"eslint": "^8.7.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4",
"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",
"get-pkg-repo": "^5.0.0",
"gh-pages": "^3.2.3",
"jest": "^27.4.7",
"jest-canvas-mock": "^2.3.1",
"node-sass": "^7.0.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.5",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-test-renderer": "^16.13.1",
"rollup": "^2.17.1",
"prettier": "^2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-test-renderer": "^17.0.2",
"rollup": "^2.64.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-dts": "^1.4.7",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^3.1.2",
"rollup-plugin-terser": "^6.1.0",
"ts-jest": "^26.1.0",
"tslib": "^2.0.0",
"typescript": "^3.9.5"
"rollup-plugin-dts": "^4.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "^27.1.3",
"ts-node": "^10.4.0",
"tslib": "^2.3.1",
"typescript": "^4.5.4"
},
"peerDependencies": {
"prop-types": "^15.5.7",
"react": "^16.8.0",
"react-dom": "^16.8.0"
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
}
}

30

README.md
# lottie-react
[![npm version](https://img.shields.io/npm/v/lottie-react)](https://www.npmjs.com/package/lottie-react) [![npm downloads/month](https://img.shields.io/npm/dm/lottie-react)](https://www.npmjs.com/package/lottie-react) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Gamote/lottie-react/blob/master/LICENSE) [![Build Status](https://travis-ci.org/Gamote/lottie-react.svg?branch=master)](https://travis-ci.org/Gamote/lottie-react) [![Coverage Status](https://coveralls.io/repos/github/Gamote/lottie-react/badge.svg?branch=master)](https://coveralls.io/github/Gamote/lottie-react?branch=master) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/13a28cb016c941daa9084654bc2bac75)](https://www.codacy.com/manual/Gamote/lottie-react) [![Known Vulnerabilities](https://snyk.io/test/github/Gamote/lottie-react/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Gamote/lottie-react?targetFile=package.json)
[![npm version](https://img.shields.io/npm/v/lottie-react)](https://www.npmjs.com/package/lottie-react) [![npm downloads/month](https://img.shields.io/npm/dm/lottie-react)](https://www.npmjs.com/package/lottie-react) [![Known Vulnerabilities](https://snyk.io/test/github/Gamote/lottie-react/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Gamote/lottie-react?targetFile=package.json) [![Coverage Status](https://coveralls.io/repos/github/Gamote/lottie-react/badge.svg?branch=master)](https://coveralls.io/github/Gamote/lottie-react?branch=master) [![Tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Gamote/lottie-react/blob/master/LICENSE)
This project is meant to give developers full control over **[Lottie](https://airbnb.design/lottie/)** instance with minimal implementation by wrapping **[lottie-web](https://github.com/airbnb/lottie-web)** in a Component or Hook that can be easily used in **React** applications.
# Installation
## Installation
Install **react**, **react-dom** and **prop-types** if you don’t have them already:
Install **react**, **react-dom** if you don’t have them already:

@@ -14,3 +14,3 @@ _**Note:** This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._

```text
npm i react@^16.8.0 react-dom@^16.8.0 prop-types@^15.5.7
npm i react@^16.8.0 react-dom@^16.8.0
```

@@ -24,5 +24,5 @@

# Usage
## Usage
## Component
### Component

@@ -42,3 +42,3 @@ ```js

## Hook
### Hook

@@ -66,7 +66,7 @@ ```js

# Documentation
## Documentation
Checkout the [Documentation](https://gamote.github.io/lottie-react) for more information and examples.
# Test
## Test
```text

@@ -76,3 +76,3 @@ npm test

## Coverage report
### Coverage report
```text

@@ -91,7 +91,7 @@ -----------------------------|---------|----------|---------|---------|-------------------

# Contribution
## Contribution
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.
# Projects to check out
## Projects to check out

@@ -104,6 +104,6 @@ - [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.

# License
## License
**lottie-react** is available under the [MIT license](https://github.com/Gamote/lottie-react/blob/master/LICENSE).
**lottie-react** is available under the [MIT license](https://github.com/Gamote/lottie-react/blob/main/LICENSE).
Thanks to [David Probst Jr](https://lottiefiles.com/davidprobstjr) for the animations used in the examples.
Thanks to [David Probst Jr](https://lottiefiles.com/davidprobstjr) for the animations used in the examples.
build/index.es.js.map

Sorry, the diff of this file is not supported yet

build/index.js.map

Sorry, the diff of this file is not supported yet

build/index.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc