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 1.2.2 to 2.0.0

build/index.d.ts

279

build/index.es.js
import lottie from 'lottie-web';
export { default as LottiePlayer } from 'lottie-web';
import React, { useRef, useEffect, forwardRef } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import { shape, oneOfType, bool, number, arrayOf, func } from 'prop-types';

@@ -91,4 +91,59 @@

var useLottie = function useLottie(props) {
var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var useLottie = function useLottie(props, style) {
var animationData = props.animationData,

@@ -108,23 +163,27 @@ loop = props.loop,

onDestroy = props.onDestroy;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
var animationInstanceRef = useRef();
var animationContainer = useRef(null);
/*
======================================
INTERACTION METHODS
======================================
*/
======================================
INTERACTION METHODS
======================================
*/
/**
* Play
* TODO: complete
*/
var play = function play() {
if (animationInstanceRef.current) {
animationInstanceRef.current.play();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
};
/**
* Stop
* TODO: complete
*/

@@ -134,9 +193,8 @@

var stop = function stop() {
if (animationInstanceRef.current) {
animationInstanceRef.current.stop();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
};
/**
* Pause
* TODO: complete
*/

@@ -146,9 +204,8 @@

var pause = function pause() {
if (animationInstanceRef.current) {
animationInstanceRef.current.pause();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
};
/**
* Set animation speed
* TODO: complete
* @param speed

@@ -159,9 +216,8 @@ */

var setSpeed = function setSpeed(speed) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setSpeed(speed);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
};
/**
* Got to frame and play
* TODO: complete
* @param value

@@ -173,9 +229,8 @@ * @param isFrame

var goToAndPlay = function goToAndPlay(value, isFrame) {
if (animationInstanceRef.current) {
animationInstanceRef.current.goToAndPlay(value, isFrame);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
};
/**
* Got to frame and stop
* TODO: complete
* @param value

@@ -187,9 +242,8 @@ * @param isFrame

var goToAndStop = function goToAndStop(value, isFrame) {
if (animationInstanceRef.current) {
animationInstanceRef.current.goToAndStop(value, isFrame);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
};
/**
* Set animation direction
* TODO: complete
* @param direction

@@ -200,22 +254,20 @@ */

var setDirection = function setDirection(direction) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setDirection(direction);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
};
/**
* Play animation segments
* TODO: complete
* @param segment
* @param force
* @param segments
* @param forceFlag
*/
var playSegments = function playSegments(segment, force) {
if (animationInstanceRef.current) {
animationInstanceRef.current.playSegments(segment, force);
}
var playSegments = function playSegments(segments, forceFlag) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
};
/**
* Set sub frames
* TODO: complete
* @param useSubFrames

@@ -226,36 +278,32 @@ */

var setSubframe = function setSubframe(useSubFrames) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setSubframe(useSubFrames);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
};
/**
* Destroy animation
* TODO: complete
* Get animation duration
* @param inFrames
*/
var destroy = function destroy() {
if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
}
var getDuration = function getDuration(inFrames) {
var _a;
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
};
/**
* Get animation duration
* TODO: complete
* @param inFrames
* Destroy animation
*/
var getDuration = function getDuration(inFrames) {
if (animationInstanceRef.current) {
return animationInstanceRef.current.getDuration(inFrames);
}
var destroy = function destroy() {
var _a;
return undefined;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
};
/*
======================================
LOTTIE
======================================
*/
======================================
LOTTIE
======================================
*/

@@ -271,3 +319,5 @@ /**

// Return if the container ref is null
var _a; // Return if the container ref is null
if (!animationContainer.current) {

@@ -278,7 +328,4 @@ return;

if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
} // Build the animation configuration
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Build the animation configuration
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {

@@ -290,2 +337,3 @@ container: animationContainer.current

animationInstanceRef.current = lottie.loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current);
};

@@ -301,34 +349,13 @@ /**

/*
======================================
EVENTS
======================================
*/
======================================
EVENTS
======================================
*/
/**
* Handle the process of adding an event listener
* @param {AnimationEventName} eventName
* @param {AnimationEventHandler} eventHandler
* @return {Function} Function that deregister the listener
*/
var addEventListenerHelper = function addEventListenerHelper(eventName, eventHandler) {
if (animationInstanceRef.current && eventName && eventHandler) {
animationInstanceRef.current.addEventListener(eventName, eventHandler); // Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(eventName, eventHandler);
};
}
return function () {};
};
/**
* Reinitialize listener on change
*/
useEffect(function () {
var listeners = [{
var partialListeners = [{
name: "complete",

@@ -364,4 +391,26 @@ handler: onComplete

}];
var deregisterList = listeners.map(function (event) {
return addEventListenerHelper(event.name, event.handler);
var listeners = partialListeners.filter(function (listener) {
return listener.handler != null;
});
if (!listeners.length) {
return;
}
var deregisterList = listeners.map(
/**
* Handle the process of adding an event listener
* @param {Listener} listener
* @return {Function} Function that deregister the listener
*/
function (listener) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler); // Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
};
}); // Deregister listeners on unmount

@@ -379,3 +428,3 @@

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

@@ -395,14 +444,14 @@ ref: animationContainer

setSubframe: setSubframe,
getDuration: getDuration,
destroy: destroy,
getDuration: getDuration
animationLoaded: animationLoaded,
animationItem: animationInstanceRef.current
};
};
var Lottie = forwardRef(function (props, ref) {
var Lottie = function Lottie(props) {
var _a;
var style = props.style,
lottieProps = _objectWithoutProperties(props, ["style"]); // TODO: find a better was to specified the ref type
// instead of redefining
var parentRef = ref;
lottieProps = _objectWithoutProperties(props, ["style"]);
/**

@@ -412,2 +461,3 @@ * Initialize the 'useLottie' hook

var _useLottie = useLottie(lottieProps, style),

@@ -424,6 +474,8 @@ View = _useLottie.View,

setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
getDuration = _useLottie.getDuration;
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
/**
* Share the hook methods with the parent component using 'ref'
* Make the hook variables/methods available through the provided 'lottieRef'
*/

@@ -433,4 +485,4 @@

useEffect(function () {
if (parentRef) {
parentRef.current = {
if (props.lottieRef) {
props.lottieRef.current = {
play: play,

@@ -445,9 +497,12 @@ stop: stop,

setSubframe: setSubframe,
getDuration: getDuration,
destroy: destroy,
getDuration: getDuration
animationLoaded: animationLoaded,
animationItem: animationItem
};
}
}, [parentRef === null || parentRef === void 0 ? void 0 : parentRef.current]);
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
return View;
});
};
Lottie.propTypes = {

@@ -454,0 +509,0 @@ animationData: shape(undefined).isRequired,

2

build/index.es.min.js

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

import e from"lottie-web";export{default as LottiePlayer}from"lottie-web";import n,{useRef as t,useEffect as r,forwardRef as o}from"react";import{shape as a,oneOfType as u,bool as l,number as i,arrayOf as c,func as d}from"prop-types";function p(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function f(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?f(Object(t),!0).forEach((function(n){p(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function m(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var y=function(o){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,u=o.animationData,l=o.loop,i=o.autoplay,c=o.initialSegment,d=o.onComplete,p=o.onLoopComplete,f=o.onEnterFrame,m=o.onSegmentStart,y=o.onConfigReady,g=o.onDataReady,b=o.onDataFailed,v=o.onLoadedImages,O=o.onDOMLoaded,S=o.onDestroy,D=t(),h=t(null),P=function(){D.current&&D.current.play()},j=function(){D.current&&D.current.stop()},w=function(){D.current&&D.current.pause()},L=function(e){D.current&&D.current.setSpeed(e)},C=function(e,n){D.current&&D.current.goToAndPlay(e,n)},E=function(e,n){D.current&&D.current.goToAndStop(e,n)},A=function(e){D.current&&D.current.setDirection(e)},T=function(e,n){D.current&&D.current.playSegments(e,n)},R=function(e){D.current&&D.current.setSubframe(e)},F=function(){D.current&&D.current.destroy()},x=function(e){if(D.current)return D.current.getDuration(e)},I=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(h.current){D.current&&D.current.destroy();var t=s(s(s({},o),n),{},{container:h.current});D.current=e.loadAnimation(t)}};r((function(){I()}),[u,l,i,c]);var M=function(e,n){return D.current&&e&&n?(D.current.addEventListener(e,n),function(){var t;null===(t=D.current)||void 0===t||t.removeEventListener(e,n)}):function(){}};r((function(){var e=[{name:"complete",handler:d},{name:"loopComplete",handler:p},{name:"enterFrame",handler:f},{name:"segmentStart",handler:m},{name:"config_ready",handler:y},{name:"data_ready",handler:g},{name:"data_failed",handler:b},{name:"loaded_images",handler:v},{name:"DOMLoaded",handler:O},{name:"destroy",handler:S}].map((function(e){return M(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[d,p,f,m,y,g,b,v,O,S]);var _=n.createElement("div",{style:a,ref:h});return{View:_,play:P,stop:j,pause:w,setSpeed:L,goToAndStop:E,goToAndPlay:C,setDirection:A,playSegments:T,setSubframe:R,destroy:F,getDuration:x}},g=o((function(e,n){var t=e.style,o=m(e,["style"]),a=n,u=y(o,t),l=u.View,i=u.play,c=u.stop,d=u.pause,p=u.setSpeed,f=u.goToAndStop,s=u.goToAndPlay,g=u.setDirection,b=u.playSegments,v=u.setSubframe,O=u.destroy,S=u.getDuration;return r((function(){a&&(a.current={play:i,stop:c,pause:d,setSpeed:p,goToAndPlay:s,goToAndStop:f,setDirection:g,playSegments:b,setSubframe:v,destroy:O,getDuration:S})}),[null==a?void 0:a.current]),l}));g.propTypes={animationData:a(void 0).isRequired,loop:u([l,i]),autoplay:l,initialSegment:c(i.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)},g.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 b=g,v=y;export default g;export{b as Animator,v as useAnimator,y as useLottie};
import e from"lottie-web";export{default as LottiePlayer}from"lottie-web";import n,{useState as t,useRef as r,useEffect as o}from"react";import{shape as a,oneOfType as i,bool as l,number as u,arrayOf as d,func as c}from"prop-types";function f(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function p(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function m(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?p(Object(t),!0).forEach((function(n){f(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function y(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(r=(i=l.next()).done)&&(t.push(i.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return v(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return v(e,n)}(e,n)||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,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var g=function(a,i){var l=a.animationData,u=a.loop,d=a.autoplay,c=a.initialSegment,f=a.onComplete,p=a.onLoopComplete,s=a.onEnterFrame,v=a.onSegmentStart,g=a.onConfigReady,b=a.onDataReady,S=a.onDataFailed,O=a.onLoadedImages,h=a.onDOMLoaded,D=a.onDestroy,j=y(t(!1),2),w=j[0],P=j[1],L=r(),A=r(null);return o((function(){!function(){var n,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(A.current){null===(n=L.current)||void 0===n||n.destroy();var r=m(m(m({},a),t),{},{container:A.current});L.current=e.loadAnimation(r),P(!!L.current)}}()}),[l,u,d,c]),o((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:p},{name:"enterFrame",handler:s},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:O},{name:"DOMLoaded",handler:h},{name:"destroy",handler:D}].filter((function(e){return null!=e.handler}));if(e.length){var n=e.map((function(e){var n;return null===(n=L.current)||void 0===n||n.addEventListener(e.name,e.handler),function(){var n;null===(n=L.current)||void 0===n||n.removeEventListener(e.name,e.handler)}}));return function(){n.forEach((function(e){return e()}))}}}),[f,p,s,v,g,b,S,O,h,D]),{View:n.createElement("div",{style:i,ref:A}),play:function(){var e;null===(e=L.current)||void 0===e||e.play()},stop:function(){var e;null===(e=L.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=L.current)||void 0===e||e.pause()},setSpeed:function(e){var n;null===(n=L.current)||void 0===n||n.setSpeed(e)},goToAndStop:function(e,n){var t;null===(t=L.current)||void 0===t||t.goToAndStop(e,n)},goToAndPlay:function(e,n){var t;null===(t=L.current)||void 0===t||t.goToAndPlay(e,n)},setDirection:function(e){var n;null===(n=L.current)||void 0===n||n.setDirection(e)},playSegments:function(e,n){var t;null===(t=L.current)||void 0===t||t.playSegments(e,n)},setSubframe:function(e){var n;null===(n=L.current)||void 0===n||n.setSubframe(e)},getDuration:function(e){var n;return null===(n=L.current)||void 0===n?void 0:n.getDuration(e)},destroy:function(){var e;null===(e=L.current)||void 0===e||e.destroy()},animationLoaded:w,animationItem:L.current}},b=function(e){var n,t=e.style,r=s(e,["style"]),a=g(r,t),i=a.View,l=a.play,u=a.stop,d=a.pause,c=a.setSpeed,f=a.goToAndStop,p=a.goToAndPlay,m=a.setDirection,y=a.playSegments,v=a.setSubframe,b=a.getDuration,S=a.destroy,O=a.animationLoaded,h=a.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:l,stop:u,pause:d,setSpeed:c,goToAndPlay:p,goToAndStop:f,setDirection:m,playSegments:y,setSubframe:v,getDuration:b,destroy:S,animationLoaded:O,animationItem:h})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),i};b.propTypes={animationData:a(void 0).isRequired,loop:i([l,u]),autoplay:l,initialSegment:d(u.isRequired),onComplete:c,onLoopComplete:c,onEnterFrame:c,onSegmentStart:c,onConfigReady:c,onDataReady:c,onDataFailed:c,onLoadedImages:c,onDOMLoaded:c,onDestroy:c,style:a(void 0)},b.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 S=b,O=g;export default b;export{S as Animator,O as useAnimator,g as useLottie};

277

build/index.js

@@ -97,4 +97,59 @@ 'use strict';

var useLottie = function useLottie(props) {
var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var useLottie = function useLottie(props, style) {
var animationData = props.animationData,

@@ -114,23 +169,27 @@ loop = props.loop,

onDestroy = props.onDestroy;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
var animationInstanceRef = React.useRef();
var animationContainer = React.useRef(null);
/*
======================================
INTERACTION METHODS
======================================
*/
======================================
INTERACTION METHODS
======================================
*/
/**
* Play
* TODO: complete
*/
var play = function play() {
if (animationInstanceRef.current) {
animationInstanceRef.current.play();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
};
/**
* Stop
* TODO: complete
*/

@@ -140,9 +199,8 @@

var stop = function stop() {
if (animationInstanceRef.current) {
animationInstanceRef.current.stop();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
};
/**
* Pause
* TODO: complete
*/

@@ -152,9 +210,8 @@

var pause = function pause() {
if (animationInstanceRef.current) {
animationInstanceRef.current.pause();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
};
/**
* Set animation speed
* TODO: complete
* @param speed

@@ -165,9 +222,8 @@ */

var setSpeed = function setSpeed(speed) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setSpeed(speed);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
};
/**
* Got to frame and play
* TODO: complete
* @param value

@@ -179,9 +235,8 @@ * @param isFrame

var goToAndPlay = function goToAndPlay(value, isFrame) {
if (animationInstanceRef.current) {
animationInstanceRef.current.goToAndPlay(value, isFrame);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
};
/**
* Got to frame and stop
* TODO: complete
* @param value

@@ -193,9 +248,8 @@ * @param isFrame

var goToAndStop = function goToAndStop(value, isFrame) {
if (animationInstanceRef.current) {
animationInstanceRef.current.goToAndStop(value, isFrame);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
};
/**
* Set animation direction
* TODO: complete
* @param direction

@@ -206,22 +260,20 @@ */

var setDirection = function setDirection(direction) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setDirection(direction);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
};
/**
* Play animation segments
* TODO: complete
* @param segment
* @param force
* @param segments
* @param forceFlag
*/
var playSegments = function playSegments(segment, force) {
if (animationInstanceRef.current) {
animationInstanceRef.current.playSegments(segment, force);
}
var playSegments = function playSegments(segments, forceFlag) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
};
/**
* Set sub frames
* TODO: complete
* @param useSubFrames

@@ -232,36 +284,32 @@ */

var setSubframe = function setSubframe(useSubFrames) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setSubframe(useSubFrames);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
};
/**
* Destroy animation
* TODO: complete
* Get animation duration
* @param inFrames
*/
var destroy = function destroy() {
if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
}
var getDuration = function getDuration(inFrames) {
var _a;
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
};
/**
* Get animation duration
* TODO: complete
* @param inFrames
* Destroy animation
*/
var getDuration = function getDuration(inFrames) {
if (animationInstanceRef.current) {
return animationInstanceRef.current.getDuration(inFrames);
}
var destroy = function destroy() {
var _a;
return undefined;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
};
/*
======================================
LOTTIE
======================================
*/
======================================
LOTTIE
======================================
*/

@@ -277,3 +325,5 @@ /**

// Return if the container ref is null
var _a; // Return if the container ref is null
if (!animationContainer.current) {

@@ -284,7 +334,4 @@ return;

if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
} // Build the animation configuration
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Build the animation configuration
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {

@@ -296,2 +343,3 @@ container: animationContainer.current

animationInstanceRef.current = lottie.loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current);
};

@@ -307,34 +355,13 @@ /**

/*
======================================
EVENTS
======================================
*/
======================================
EVENTS
======================================
*/
/**
* Handle the process of adding an event listener
* @param {AnimationEventName} eventName
* @param {AnimationEventHandler} eventHandler
* @return {Function} Function that deregister the listener
*/
var addEventListenerHelper = function addEventListenerHelper(eventName, eventHandler) {
if (animationInstanceRef.current && eventName && eventHandler) {
animationInstanceRef.current.addEventListener(eventName, eventHandler); // Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(eventName, eventHandler);
};
}
return function () {};
};
/**
* Reinitialize listener on change
*/
React.useEffect(function () {
var listeners = [{
var partialListeners = [{
name: "complete",

@@ -370,4 +397,26 @@ handler: onComplete

}];
var deregisterList = listeners.map(function (event) {
return addEventListenerHelper(event.name, event.handler);
var listeners = partialListeners.filter(function (listener) {
return listener.handler != null;
});
if (!listeners.length) {
return;
}
var deregisterList = listeners.map(
/**
* Handle the process of adding an event listener
* @param {Listener} listener
* @return {Function} Function that deregister the listener
*/
function (listener) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler); // Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
};
}); // Deregister listeners on unmount

@@ -385,3 +434,3 @@

var View = React__default.createElement("div", {
var View = /*#__PURE__*/React__default.createElement("div", {
style: style,

@@ -401,14 +450,14 @@ ref: animationContainer

setSubframe: setSubframe,
getDuration: getDuration,
destroy: destroy,
getDuration: getDuration
animationLoaded: animationLoaded,
animationItem: animationInstanceRef.current
};
};
var Lottie = React.forwardRef(function (props, ref) {
var Lottie = function Lottie(props) {
var _a;
var style = props.style,
lottieProps = _objectWithoutProperties(props, ["style"]); // TODO: find a better was to specified the ref type
// instead of redefining
var parentRef = ref;
lottieProps = _objectWithoutProperties(props, ["style"]);
/**

@@ -418,2 +467,3 @@ * Initialize the 'useLottie' hook

var _useLottie = useLottie(lottieProps, style),

@@ -430,6 +480,8 @@ View = _useLottie.View,

setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
getDuration = _useLottie.getDuration;
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
/**
* Share the hook methods with the parent component using 'ref'
* Make the hook variables/methods available through the provided 'lottieRef'
*/

@@ -439,4 +491,4 @@

React.useEffect(function () {
if (parentRef) {
parentRef.current = {
if (props.lottieRef) {
props.lottieRef.current = {
play: play,

@@ -451,9 +503,12 @@ stop: stop,

setSubframe: setSubframe,
getDuration: getDuration,
destroy: destroy,
getDuration: getDuration
animationLoaded: animationLoaded,
animationItem: animationItem
};
}
}, [parentRef === null || parentRef === void 0 ? void 0 : parentRef.current]);
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
return View;
});
};
Lottie.propTypes = {

@@ -460,0 +515,0 @@ animationData: PropTypes.shape(undefined).isRequired,

2

build/index.min.js

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

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=e(require("lottie-web")),t=require("react"),r=e(t),o=require("prop-types");function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?u(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=function(e){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,a=e.animationData,u=e.loop,l=e.autoplay,c=e.initialSegment,f=e.onComplete,d=e.onLoopComplete,p=e.onEnterFrame,s=e.onSegmentStart,y=e.onConfigReady,m=e.onDataReady,g=e.onDataFailed,b=e.onLoadedImages,O=e.onDOMLoaded,v=e.onDestroy,S=t.useRef(),D=t.useRef(null),h=function(){S.current&&S.current.play()},j=function(){S.current&&S.current.stop()},P=function(){S.current&&S.current.pause()},L=function(e){S.current&&S.current.setSpeed(e)},w=function(e,n){S.current&&S.current.goToAndPlay(e,n)},E=function(e,n){S.current&&S.current.goToAndStop(e,n)},A=function(e){S.current&&S.current.setDirection(e)},R=function(e,n){S.current&&S.current.playSegments(e,n)},C=function(e){S.current&&S.current.setSubframe(e)},T=function(){S.current&&S.current.destroy()},x=function(e){if(S.current)return S.current.getDuration(e)},F=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(D.current){S.current&&S.current.destroy();var r=i(i(i({},e),t),{},{container:D.current});S.current=n.loadAnimation(r)}};t.useEffect((function(){F()}),[a,u,l,c]);var _=function(e,n){return S.current&&e&&n?(S.current.addEventListener(e,n),function(){var t;null===(t=S.current)||void 0===t||t.removeEventListener(e,n)}):function(){}};t.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:d},{name:"enterFrame",handler:p},{name:"segmentStart",handler:s},{name:"config_ready",handler:y},{name:"data_ready",handler:m},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:O},{name:"destroy",handler:v}].map((function(e){return _(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[f,d,p,s,y,m,g,b,O,v]);var q=r.createElement("div",{style:o,ref:D});return{View:q,play:h,stop:j,pause:P,setSpeed:L,goToAndStop:E,goToAndPlay:w,setDirection:A,playSegments:R,setSubframe:C,destroy:T,getDuration:x}},f=t.forwardRef((function(e,n){var r=e.style,o=l(e,["style"]),a=n,u=c(o,r),i=u.View,f=u.play,d=u.stop,p=u.pause,s=u.setSpeed,y=u.goToAndStop,m=u.goToAndPlay,g=u.setDirection,b=u.playSegments,O=u.setSubframe,v=u.destroy,S=u.getDuration;return t.useEffect((function(){a&&(a.current={play:f,stop:d,pause:p,setSpeed:s,goToAndPlay:m,goToAndStop:y,setDirection:g,playSegments:b,setSubframe:O,destroy:v,getDuration:S})}),[null==a?void 0:a.current]),i}));f.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)},f.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 d=f,p=c;exports.LottiePlayer=n,exports.Animator=d,exports.default=f,exports.useAnimator=p,exports.useLottie=c;
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=e(require("lottie-web")),t=require("react"),r=e(t),o=require("prop-types");function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?u(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function c(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var u,i=e[Symbol.iterator]();!(r=(u=i.next()).done)&&(t.push(u.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return d(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return d(e,n)}(e,n)||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 d(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var f=function(e,o){var a=e.animationData,u=e.loop,l=e.autoplay,d=e.initialSegment,f=e.onComplete,s=e.onLoopComplete,p=e.onEnterFrame,y=e.onSegmentStart,m=e.onConfigReady,v=e.onDataReady,g=e.onDataFailed,b=e.onLoadedImages,S=e.onDOMLoaded,O=e.onDestroy,h=c(t.useState(!1),2),D=h[0],j=h[1],P=t.useRef(),A=t.useRef(null);return t.useEffect((function(){!function(){var t,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(A.current){null===(t=P.current)||void 0===t||t.destroy();var o=i(i(i({},e),r),{},{container:A.current});P.current=n.loadAnimation(o),j(!!P.current)}}()}),[a,u,l,d]),t.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:s},{name:"enterFrame",handler:p},{name:"segmentStart",handler:y},{name:"config_ready",handler:m},{name:"data_ready",handler:v},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:S},{name:"destroy",handler:O}].filter((function(e){return null!=e.handler}));if(e.length){var n=e.map((function(e){var n;return null===(n=P.current)||void 0===n||n.addEventListener(e.name,e.handler),function(){var n;null===(n=P.current)||void 0===n||n.removeEventListener(e.name,e.handler)}}));return function(){n.forEach((function(e){return e()}))}}}),[f,s,p,y,m,v,g,b,S,O]),{View:r.createElement("div",{style:o,ref:A}),play:function(){var e;null===(e=P.current)||void 0===e||e.play()},stop:function(){var e;null===(e=P.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=P.current)||void 0===e||e.pause()},setSpeed:function(e){var n;null===(n=P.current)||void 0===n||n.setSpeed(e)},goToAndStop:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndStop(e,n)},goToAndPlay:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndPlay(e,n)},setDirection:function(e){var n;null===(n=P.current)||void 0===n||n.setDirection(e)},playSegments:function(e,n){var t;null===(t=P.current)||void 0===t||t.playSegments(e,n)},setSubframe:function(e){var n;null===(n=P.current)||void 0===n||n.setSubframe(e)},getDuration:function(e){var n;return null===(n=P.current)||void 0===n?void 0:n.getDuration(e)},destroy:function(){var e;null===(e=P.current)||void 0===e||e.destroy()},animationLoaded:D,animationItem:P.current}},s=function(e){var n,r=e.style,o=l(e,["style"]),a=f(o,r),u=a.View,i=a.play,c=a.stop,d=a.pause,s=a.setSpeed,p=a.goToAndStop,y=a.goToAndPlay,m=a.setDirection,v=a.playSegments,g=a.setSubframe,b=a.getDuration,S=a.destroy,O=a.animationLoaded,h=a.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:i,stop:c,pause:d,setSpeed:s,goToAndPlay:y,goToAndStop:p,setDirection:m,playSegments:v,setSubframe:g,getDuration:b,destroy:S,animationLoaded:O,animationItem:h})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),u};s.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)},s.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 p=s,y=f;exports.LottiePlayer=n,exports.Animator=p,exports.default=s,exports.useAnimator=y,exports.useLottie=f;

277

build/index.umd.js

@@ -95,4 +95,59 @@ (function (global, factory) {

var useLottie = function useLottie(props) {
var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var useLottie = function useLottie(props, style) {
var animationData = props.animationData,

@@ -112,23 +167,27 @@ loop = props.loop,

onDestroy = props.onDestroy;
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
var animationInstanceRef = React.useRef();
var animationContainer = React.useRef(null);
/*
======================================
INTERACTION METHODS
======================================
*/
======================================
INTERACTION METHODS
======================================
*/
/**
* Play
* TODO: complete
*/
var play = function play() {
if (animationInstanceRef.current) {
animationInstanceRef.current.play();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
};
/**
* Stop
* TODO: complete
*/

@@ -138,9 +197,8 @@

var stop = function stop() {
if (animationInstanceRef.current) {
animationInstanceRef.current.stop();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
};
/**
* Pause
* TODO: complete
*/

@@ -150,9 +208,8 @@

var pause = function pause() {
if (animationInstanceRef.current) {
animationInstanceRef.current.pause();
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
};
/**
* Set animation speed
* TODO: complete
* @param speed

@@ -163,9 +220,8 @@ */

var setSpeed = function setSpeed(speed) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setSpeed(speed);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
};
/**
* Got to frame and play
* TODO: complete
* @param value

@@ -177,9 +233,8 @@ * @param isFrame

var goToAndPlay = function goToAndPlay(value, isFrame) {
if (animationInstanceRef.current) {
animationInstanceRef.current.goToAndPlay(value, isFrame);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
};
/**
* Got to frame and stop
* TODO: complete
* @param value

@@ -191,9 +246,8 @@ * @param isFrame

var goToAndStop = function goToAndStop(value, isFrame) {
if (animationInstanceRef.current) {
animationInstanceRef.current.goToAndStop(value, isFrame);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
};
/**
* Set animation direction
* TODO: complete
* @param direction

@@ -204,22 +258,20 @@ */

var setDirection = function setDirection(direction) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setDirection(direction);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
};
/**
* Play animation segments
* TODO: complete
* @param segment
* @param force
* @param segments
* @param forceFlag
*/
var playSegments = function playSegments(segment, force) {
if (animationInstanceRef.current) {
animationInstanceRef.current.playSegments(segment, force);
}
var playSegments = function playSegments(segments, forceFlag) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
};
/**
* Set sub frames
* TODO: complete
* @param useSubFrames

@@ -230,36 +282,32 @@ */

var setSubframe = function setSubframe(useSubFrames) {
if (animationInstanceRef.current) {
animationInstanceRef.current.setSubframe(useSubFrames);
}
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
};
/**
* Destroy animation
* TODO: complete
* Get animation duration
* @param inFrames
*/
var destroy = function destroy() {
if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
}
var getDuration = function getDuration(inFrames) {
var _a;
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
};
/**
* Get animation duration
* TODO: complete
* @param inFrames
* Destroy animation
*/
var getDuration = function getDuration(inFrames) {
if (animationInstanceRef.current) {
return animationInstanceRef.current.getDuration(inFrames);
}
var destroy = function destroy() {
var _a;
return undefined;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
};
/*
======================================
LOTTIE
======================================
*/
======================================
LOTTIE
======================================
*/

@@ -275,3 +323,5 @@ /**

// Return if the container ref is null
var _a; // Return if the container ref is null
if (!animationContainer.current) {

@@ -282,7 +332,4 @@ return;

if (animationInstanceRef.current) {
animationInstanceRef.current.destroy();
} // Build the animation configuration
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Build the animation configuration
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {

@@ -294,2 +341,3 @@ container: animationContainer.current

animationInstanceRef.current = lottie.loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current);
};

@@ -305,34 +353,13 @@ /**

/*
======================================
EVENTS
======================================
*/
======================================
EVENTS
======================================
*/
/**
* Handle the process of adding an event listener
* @param {AnimationEventName} eventName
* @param {AnimationEventHandler} eventHandler
* @return {Function} Function that deregister the listener
*/
var addEventListenerHelper = function addEventListenerHelper(eventName, eventHandler) {
if (animationInstanceRef.current && eventName && eventHandler) {
animationInstanceRef.current.addEventListener(eventName, eventHandler); // Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(eventName, eventHandler);
};
}
return function () {};
};
/**
* Reinitialize listener on change
*/
React.useEffect(function () {
var listeners = [{
var partialListeners = [{
name: "complete",

@@ -368,4 +395,26 @@ handler: onComplete

}];
var deregisterList = listeners.map(function (event) {
return addEventListenerHelper(event.name, event.handler);
var listeners = partialListeners.filter(function (listener) {
return listener.handler != null;
});
if (!listeners.length) {
return;
}
var deregisterList = listeners.map(
/**
* Handle the process of adding an event listener
* @param {Listener} listener
* @return {Function} Function that deregister the listener
*/
function (listener) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler); // Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
};
}); // Deregister listeners on unmount

@@ -383,3 +432,3 @@

var View = React__default.createElement("div", {
var View = /*#__PURE__*/React__default.createElement("div", {
style: style,

@@ -399,14 +448,14 @@ ref: animationContainer

setSubframe: setSubframe,
getDuration: getDuration,
destroy: destroy,
getDuration: getDuration
animationLoaded: animationLoaded,
animationItem: animationInstanceRef.current
};
};
var Lottie = React.forwardRef(function (props, ref) {
var Lottie = function Lottie(props) {
var _a;
var style = props.style,
lottieProps = _objectWithoutProperties(props, ["style"]); // TODO: find a better was to specified the ref type
// instead of redefining
var parentRef = ref;
lottieProps = _objectWithoutProperties(props, ["style"]);
/**

@@ -416,2 +465,3 @@ * Initialize the 'useLottie' hook

var _useLottie = useLottie(lottieProps, style),

@@ -428,6 +478,8 @@ View = _useLottie.View,

setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
getDuration = _useLottie.getDuration;
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
/**
* Share the hook methods with the parent component using 'ref'
* Make the hook variables/methods available through the provided 'lottieRef'
*/

@@ -437,4 +489,4 @@

React.useEffect(function () {
if (parentRef) {
parentRef.current = {
if (props.lottieRef) {
props.lottieRef.current = {
play: play,

@@ -449,9 +501,12 @@ stop: stop,

setSubframe: setSubframe,
getDuration: getDuration,
destroy: destroy,
getDuration: getDuration
animationLoaded: animationLoaded,
animationItem: animationItem
};
}
}, [parentRef === null || parentRef === void 0 ? void 0 : parentRef.current]);
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
return View;
});
};
Lottie.propTypes = {

@@ -458,0 +513,0 @@ animationData: PropTypes.shape(undefined).isRequired,

2

build/index.umd.min.js

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

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("lottie-web"),require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react","prop-types"],n):n((e=e||self)["lottie-react"]={},e.Lottie,e.React,e.PropTypes)}(this,(function(e,n,t,r){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var o="default"in t?t.default:t;function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?u(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var c=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,a=e.animationData,u=e.loop,l=e.autoplay,c=e.initialSegment,f=e.onComplete,d=e.onLoopComplete,p=e.onEnterFrame,s=e.onSegmentStart,y=e.onConfigReady,m=e.onDataReady,g=e.onDataFailed,b=e.onLoadedImages,O=e.onDOMLoaded,v=e.onDestroy,S=t.useRef(),D=t.useRef(null),h=function(){S.current&&S.current.play()},P=function(){S.current&&S.current.stop()},j=function(){S.current&&S.current.pause()},w=function(e){S.current&&S.current.setSpeed(e)},L=function(e,n){S.current&&S.current.goToAndPlay(e,n)},E=function(e,n){S.current&&S.current.goToAndStop(e,n)},R=function(e){S.current&&S.current.setDirection(e)},A=function(e,n){S.current&&S.current.playSegments(e,n)},T=function(e){S.current&&S.current.setSubframe(e)},C=function(){S.current&&S.current.destroy()},F=function(e){if(S.current)return S.current.getDuration(e)},_=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(D.current){S.current&&S.current.destroy();var r=i(i(i({},e),t),{},{container:D.current});S.current=n.loadAnimation(r)}};t.useEffect((function(){_()}),[a,u,l,c]);var q=function(e,n){return S.current&&e&&n?(S.current.addEventListener(e,n),function(){var t;null===(t=S.current)||void 0===t||t.removeEventListener(e,n)}):function(){}};t.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:d},{name:"enterFrame",handler:p},{name:"segmentStart",handler:s},{name:"config_ready",handler:y},{name:"data_ready",handler:m},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:O},{name:"destroy",handler:v}].map((function(e){return q(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[f,d,p,s,y,m,g,b,O,v]);var x=o.createElement("div",{style:r,ref:D});return{View:x,play:h,stop:P,pause:j,setSpeed:w,goToAndStop:E,goToAndPlay:L,setDirection:R,playSegments:A,setSubframe:T,destroy:C,getDuration:F}},f=t.forwardRef((function(e,n){var r=e.style,o=l(e,["style"]),a=n,u=c(o,r),i=u.View,f=u.play,d=u.stop,p=u.pause,s=u.setSpeed,y=u.goToAndStop,m=u.goToAndPlay,g=u.setDirection,b=u.playSegments,O=u.setSubframe,v=u.destroy,S=u.getDuration;return t.useEffect((function(){a&&(a.current={play:f,stop:d,pause:p,setSpeed:s,goToAndPlay:m,goToAndStop:y,setDirection:g,playSegments:b,setSubframe:O,destroy:v,getDuration:S})}),[null==a?void 0:a.current]),i}));f.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)},f.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 d=f,p=c;e.LottiePlayer=n,e.Animator=d,e.default=f,e.useAnimator=p,e.useLottie=c,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("lottie-web"),require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react","prop-types"],n):n((e=e||self)["lottie-react"]={},e.Lottie,e.React,e.PropTypes)}(this,(function(e,n,t,r){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var o="default"in t?t.default:t;function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function u(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function c(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(r=(i=u.next()).done)&&(t.push(i.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==u.return||u.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return d(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return d(e,n)}(e,n)||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 d(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var f=function(e,r){var a=e.animationData,i=e.loop,l=e.autoplay,d=e.initialSegment,f=e.onComplete,p=e.onLoopComplete,s=e.onEnterFrame,y=e.onSegmentStart,m=e.onConfigReady,v=e.onDataReady,g=e.onDataFailed,b=e.onLoadedImages,O=e.onDOMLoaded,S=e.onDestroy,h=c(t.useState(!1),2),D=h[0],j=h[1],P=t.useRef(),w=t.useRef(null);return t.useEffect((function(){!function(){var t,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(w.current){null===(t=P.current)||void 0===t||t.destroy();var o=u(u(u({},e),r),{},{container:w.current});P.current=n.loadAnimation(o),j(!!P.current)}}()}),[a,i,l,d]),t.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:p},{name:"enterFrame",handler:s},{name:"segmentStart",handler:y},{name:"config_ready",handler:m},{name:"data_ready",handler:v},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:O},{name:"destroy",handler:S}].filter((function(e){return null!=e.handler}));if(e.length){var n=e.map((function(e){var n;return null===(n=P.current)||void 0===n||n.addEventListener(e.name,e.handler),function(){var n;null===(n=P.current)||void 0===n||n.removeEventListener(e.name,e.handler)}}));return function(){n.forEach((function(e){return e()}))}}}),[f,p,s,y,m,v,g,b,O,S]),{View:o.createElement("div",{style:r,ref:w}),play:function(){var e;null===(e=P.current)||void 0===e||e.play()},stop:function(){var e;null===(e=P.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=P.current)||void 0===e||e.pause()},setSpeed:function(e){var n;null===(n=P.current)||void 0===n||n.setSpeed(e)},goToAndStop:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndStop(e,n)},goToAndPlay:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndPlay(e,n)},setDirection:function(e){var n;null===(n=P.current)||void 0===n||n.setDirection(e)},playSegments:function(e,n){var t;null===(t=P.current)||void 0===t||t.playSegments(e,n)},setSubframe:function(e){var n;null===(n=P.current)||void 0===n||n.setSubframe(e)},getDuration:function(e){var n;return null===(n=P.current)||void 0===n?void 0:n.getDuration(e)},destroy:function(){var e;null===(e=P.current)||void 0===e||e.destroy()},animationLoaded:D,animationItem:P.current}},p=function(e){var n,r=e.style,o=l(e,["style"]),a=f(o,r),i=a.View,u=a.play,c=a.stop,d=a.pause,p=a.setSpeed,s=a.goToAndStop,y=a.goToAndPlay,m=a.setDirection,v=a.playSegments,g=a.setSubframe,b=a.getDuration,O=a.destroy,S=a.animationLoaded,h=a.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:u,stop:c,pause:d,setSpeed:p,goToAndPlay:y,goToAndStop:s,setDirection:m,playSegments:v,setSubframe:g,getDuration:b,destroy:O,animationLoaded:S,animationItem:h})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),i};p.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)},p.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 s=p,y=f;e.LottiePlayer=n,e.Animator=s,e.default=p,e.useAnimator=y,e.useLottie=f,Object.defineProperty(e,"__esModule",{value:!0})}));

182

package.json
{
"name": "lottie-react",
"version": "1.2.2",
"description": "Lottie for React",
"author": "David Gamote",
"bugs": {
"url": "https://github.com/Gamote/lottie-react/issues"
},
"homepage": "https://github.com/Gamote/lottie-react",
"repository": {
"type": "git",
"url": "git+https://github.com/Gamote/lottie-react.git"
},
"license": "MIT",
"keywords": [
"lottie",
"react",
"lottie react",
"react lottie",
"lottie web",
"animation",
"component",
"hook"
],
"main": "build/index.js",
"browser": "build/index.umd.js",
"module": "build/index.es.js",
"style": "build/index.css",
"files": [
"/build"
],
"scripts": {
"tsc:compile": "tsc",
"tsc:compile:watch": "tsc --watch",
"rollup:compile": "rollup -c",
"rollup:compile:watch": "rollup -c -w",
"docz:dev": "docz dev",
"docz:build": "docz build",
"docz:serve": "docz build && docz serve",
"build": "run-s tsc:compile rollup:compile",
"build:watch": "run-p tsc:compile:watch rollup:compile:watch",
"postbuild": "npm pack && tar -xvzf *.tgz && rm -rf package *.tgz",
"prepublishOnly": "rm -rf build && npm run build"
},
"peerDependencies": {
"react": "^16.8.0",
"react-dom": "^16.8.0",
"prop-types": "^15.5.7"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@rollup/plugin-commonjs": "^12.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"docz": "^2.3.1",
"eslint": "^7.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.2",
"node-sass": "^4.14.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",
"rollup": "^2.10.9",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-terser": "^6.0.1",
"tslib": "^2.0.0",
"typescript": "^3.9.3"
},
"dependencies": {
"lottie-web": "^5.6.10"
}
"name": "lottie-react",
"version": "2.0.0",
"description": "Lottie for React",
"keywords": [
"lottie",
"react",
"lottie react",
"react lottie",
"lottie web",
"animation",
"component",
"hook"
],
"homepage": "https://github.com/Gamote/lottie-react",
"bugs": {
"url": "https://github.com/Gamote/lottie-react/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Gamote/lottie-react.git"
},
"license": "MIT",
"author": "David Gamote",
"main": "build/index.js",
"module": "build/index.es.js",
"browser": "build/index.umd.js",
"types": "build/index.d.ts",
"style": "build/index.css",
"files": [
"/build"
],
"scripts": {
"build": "run-s tsc:compile rollup:compile",
"postbuild": "npm pack && tar -xvzf *.tgz && rm -rf package *.tgz",
"build:watch": "run-p tsc:compile:watch rollup:compile:watch",
"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
"docz:build": "docz build",
"docz:dev": "docz dev",
"docz:serve": "docz build && docz serve",
"prepublishOnly": "rm -rf build && npm run build",
"rollup:compile": "rollup -c",
"rollup:compile:watch": "rollup -c -w",
"test": "jest",
"test:watch": "jest --watch",
"tsc:compile": "tsc",
"tsc:compile:watch": "tsc --watch"
},
"dependencies": {
"lottie-web": "^5.6.10"
},
"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",
"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",
"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",
"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"
},
"peerDependencies": {
"prop-types": "^15.5.7",
"react": "^16.8.0",
"react-dom": "^16.8.0"
}
}

91

README.md

@@ -1,8 +0,8 @@

# Lottie for React
# 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)
[![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)
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

@@ -13,3 +13,3 @@ Install **react**, **react-dom** and **prop-types** if you don’t have them already:

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

@@ -19,13 +19,76 @@ ```

Install **lottie-react** using npm:
```
```text
npm i lottie-react
```
## Documentation and Examples
# Usage
https://gamote.github.io/lottie-react
## Component
## Projects to check out
```js
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";
- [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
const Example = () => {
return <Lottie animationData={groovyWalkAnimation} />;
};
export default Example;
```
[Try it on CodeSandbox](https://codesandbox.io/s/lottie-react-component-2k13t)
## Hook
```js
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";
const Example = () => {
const options = {
animationData: groovyWalkAnimation,
loop: true,
autoplay: true,
};
const { View } = useLottie(options);
return View;
};
export default Example;
```
[Try it on CodeSandbox](https://codesandbox.io/s/lottie-react-hook-13nio)
# Documentation
Checkout the [Documentation](https://gamote.github.io/lottie-react) for more information and examples.
# Test
```text
npm test
```
## Coverage report
```text
|-----------------|---------|----------|---------|---------|-------------------|
| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
|-----------------|---------|----------|---------|---------|-------------------|
| All files | 100 | 100 | 100 | 100 | |
| components | 100 | 100 | 100 | 100 | |
| Lottie.ts | 100 | 100 | 100 | 100 | |
| hooks | 100 | 100 | 100 | 100 | |
| useLottie.tsx | 100 | 100 | 100 | 100 | |
|-----------------|---------|----------|---------|---------|-------------------|
```
# 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
- [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-android](https://github.com/airbnb/lottie-android) - Lottie implementation for Android

@@ -36,10 +99,6 @@ - [lottie-ios](https://github.com/airbnb/lottie-ios) - Lottie implementation for iOS

## Contribution
# License
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.
**lottie-react** is available under the [MIT license](https://github.com/Gamote/lottie-react/blob/master/LICENSE).
## License
[MIT](https://github.com/Gamote/lottie-react/blob/master/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