react-lottie-hook - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/index.cjs.d.ts

@@ -8,3 +8,3 @@ /// <reference types="react" />
     height?: number;
-    style?: object;
+    style?: React.CSSProperties;
     title?: string;
@@ -22,2 +22,4 @@ className?: string;
     onClickIn: () => void;
+    style?: React.CSSProperties;
+    className?: string;
     children: React.ReactNode;
@@ -43,5 +45,4 @@ }
     getDuration?(inFrames?: boolean): number;
-    triggerEvent?<T = any>(name: AnimationEventName, args: T): void;
-    addEventListener?<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
-    removeEventListener?<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
+    addEventListener?<T = AnimationEventTypes>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
+    removeEventListener?<T = AnimationEventTypes>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
 }
@@ -56,26 +57,77 @@ interface LottieOptions extends AnimationConfigWithData {
 }
+type AnimationData = AnimationConfigWithPath | AnimationConfigWithData | Record<string, unknown>;
 interface LottieConfig extends Omit<AnimationConfig, "container"> {
     title?: string;
     options?: LottieOptions;
-    eventListeners?: EventListener[];
+    eventListeners?: EventListener;
     direction?: 1 | -1 | number;
     speed?: number;
     segments?: AnimationSegment | AnimationSegment[];
-    animationData?: AnimationConfigWithPath | AnimationConfigWithData | {};
+    animationData?: AnimationData;
 }
 type EventListener<T = any> = {
-    eventName: AnimationEventName;
-    callback: AnimationEventCallback<T>;
+    complete?: AnimationEventCallback<BMCompleteEvent>;
+    destroy?: AnimationEventCallback<BMDestroyEvent>;
+    loopComplete?: AnimationEventCallback<BMCompleteLoopEvent>;
+    enterFrame?: AnimationEventCallback<BMEnterFrameEvent>;
+    segmentStart?: AnimationEventCallback<BMSegmentStartEvent>;
+    config_ready?: AnimationEventCallback<T>;
+    data_ready?: AnimationEventCallback<T>;
+    data_failed?: AnimationEventCallback<T>;
+    DOMLoaded?: AnimationEventCallback;
+    error?: AnimationEventCallback<T>;
+    loaded_images?: AnimationEventCallback<T>;
 };
 interface LottieState {
-    animationData: AnimationConfigWithPath | AnimationConfigWithData | {};
+    animationData: AnimationData;
     isStopped: boolean;
     isPaused: boolean;
+    isLoaded: boolean;
 }
+type BMEventType<T = string> = {
+    type: T;
+};
+interface BMCompleteEvent extends BMEventType<"complete"> {
+    direction: number;
+}
+interface BMCompleteLoopEvent extends BMEventType<"loopComplete"> {
+    currentLoop: number;
+    direction: number;
+    totalLoops: boolean;
+}
+interface BMEnterFrameEvent extends BMEventType<"enterFrame"> {
+    currentTime: number;
+    direction: number;
+    totalTime: boolean;
+}
+interface BMDestroyEvent extends BMEventType<"destroy"> {
+    target: AnimationItem;
+}
+interface BMSegmentStartEvent extends BMEventType<"BMSegmentStartEvent"> {
+    firstFrame: number;
+    totalFrames: number;
+}
+interface BMRenderFrameErrorEvent extends BMEventType<"renderFrameError"> {
+    nativeError: Error;
+    currentTime: number;
+}
+interface BMConfigErrorEvent extends BMEventType<"configError"> {
+    nativeError: Error;
+}
+interface BMAnimationConfigErrorEvent extends BMEventType {
+    nativeError: Error;
+    currentTime: number;
+}
+type AnimationEventTypes = BMCompleteEvent | BMCompleteLoopEvent | BMEnterFrameEvent | BMDestroyEvent | BMRenderFrameErrorEvent | BMConfigErrorEvent | BMAnimationConfigErrorEvent | any;
 declare const Lottie: React.FC<LottieProps>;
-declare const useLottie: ({ renderer, loop, autoplay, rendererSettings, segments, animationData, ...props }: LottieConfig) => [React.MutableRefObject<HTMLDivElement | null>, {
-    isStopped: boolean;
-    isPaused: boolean;
-}, AnimationDispatch];
+declare const useLottie: ({ renderer, loop, autoplay, rendererSettings, segments, animationData, eventListeners }: LottieConfig) => [
+    React.MutableRefObject<HTMLDivElement | null>,
+    {
+        isStopped: boolean;
+        isPaused: boolean;
+        isLoaded: boolean;
+    },
+    AnimationDispatch
+];
 declare const ClickAway: React.ForwardRefExoticComponent<ClickAwayProps & React.RefAttributes<unknown>>;
-export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, AnimationDispatch, LottieOptions, Renderer, LottieConfig, EventListener, LottieState };
+export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, AnimationDispatch, LottieOptions, Renderer, AnimationData, LottieConfig, EventListener, LottieState, BMCompleteEvent, BMCompleteLoopEvent, BMEnterFrameEvent, BMDestroyEvent, BMSegmentStartEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent, BMAnimationConfigErrorEvent, AnimationEventTypes };

dist/index.cjs.js

@@ -5,10 +5,13 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var tslib = require('tslib');
 var React = require('react');
-var React__default = _interopDefault(React);
-var lottie = _interopDefault(require('lottie-web'));
-var ReactDOM = _interopDefault(require('react-dom'));
+var lottie = require('lottie-web');
+var ReactDOM = require('react-dom');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+
 var Lottie = function (props) {
@@ -23,3 +26,5 @@ if (!props.lottieRef) {
     var styles = React.useMemo(function () { return (tslib.__assign({ width: getSize(props.width), height: getSize(props.height), overflow: "hidden", margin: "0 auto", outline: "none" }, props.style)); }, [props.style, props.width, props.height, getSize]);
-    return (React__default.createElement("div", { ref: function (r) { return (props.lottieRef.current = r); }, className: props.className, style: styles, onKeyDown: props.onKeyDown, onClick: props.onClick, title: props.title, role: props.ariaRole, "aria-label": props.ariaLabel, "tab-index": "0" }));
+    return (React__default['default'].createElement("div", { ref: function (r) {
+            props.lottieRef.current = r;
+        }, className: props.className, style: styles, onKeyDown: props.onKeyDown, onClick: props.onClick, title: props.title, role: props.ariaRole, "aria-label": props.ariaLabel, "tab-index": "0" }));
 };
@@ -33,24 +38,38 @@
 
+var object = {
+    isPopulated: function (obj) { return !!obj && typeof obj === "object" && Object.keys(obj).length > 0; }
+};
+
 var useLottie = function (_a) {
-    var _b = _a.renderer, renderer = _b === void 0 ? exports.Renderer.html : _b, _c = _a.loop, loop = _c === void 0 ? true : _c, _d = _a.autoplay, autoplay = _d === void 0 ? true : _d, _e = _a.rendererSettings, rendererSettings = _e === void 0 ? {} : _e, _f = _a.segments, segments = _f === void 0 ? [] : _f, _g = _a.animationData, animationData = _g === void 0 ? {} : _g, props = tslib.__rest(_a, ["renderer", "loop", "autoplay", "rendererSettings", "segments", "animationData"]);
-    var _h = React.useState(undefined), animation = _h[0], setAnimation = _h[1];
-    var lottieRef = React__default.useRef(null);
-    var _j = React.useState(animationData), internalAnimationData = _j[0], setInternalAnimationData = _j[1];
-    var _k = React.useState({
+    var _b = _a.renderer, renderer = _b === void 0 ? exports.Renderer.html : _b, _c = _a.loop, loop = _c === void 0 ? true : _c, _d = _a.autoplay, autoplay = _d === void 0 ? true : _d, _e = _a.rendererSettings, rendererSettings = _e === void 0 ? {} : _e, _f = _a.segments, segments = _f === void 0 ? [] : _f, _g = _a.animationData, animationData = _g === void 0 ? {} : _g, _h = _a.eventListeners, eventListeners = _h === void 0 ? {} : _h;
+    var _j = React.useState(undefined), animation = _j[0], setAnimation = _j[1];
+    var lottieRef = React__default['default'].useRef(null);
+    var _k = React.useState(animationData), internalAnimationData = _k[0], setInternalAnimationData = _k[1];
+    var _l = React.useState({
         animationData: animationData,
         isStopped: false,
-        isPaused: false
-    }), state = _k[0], dispatch = _k[1];
-    var registerEvents = React.useCallback(function (eventListeners) {
-        eventListeners.forEach(function (eventListener) {
-            animation && animation.addEventListener(eventListener.eventName, eventListener.callback);
+        isPaused: false,
+        isLoaded: false
+    }), state = _l[0], dispatch = _l[1];
+    var hasOwnProperty = React.useCallback(function (anim, prop) { return object.isPopulated(anim) && !!anim[prop]; }, []);
+    var registerEvents = React.useCallback(function (anim, eventListeners) {
+        if (!object.isPopulated(eventListeners))
+            return;
+        Object.entries(eventListeners).forEach(function (_a) {
+            var eventName = _a[0], callback = _a[1];
+            if (hasOwnProperty(anim, "addEventListener") && callback !== undefined) {
+                anim === null || anim === void 0 ? void 0 : anim.addEventListener(eventName, callback);
+            }
         });
-    }, [animation]);
-    var deRegisterEvents = React.useCallback(function (eventListeners) {
-        eventListeners.forEach(function (eventListener) {
-            if (animation && animation.removeEventListener) {
-                animation.removeEventListener(eventListener.eventName, eventListener.callback);
+    }, [hasOwnProperty]);
+    var deRegisterEvents = React.useCallback(function (anim, eventListeners) {
+        if (!object.isPopulated(eventListeners))
+            return;
+        Object.entries(eventListeners).forEach(function (_a) {
+            var eventName = _a[0], callback = _a[1];
+            if (hasOwnProperty(anim, "removeEventListener")) {
+                anim === null || anim === void 0 ? void 0 : anim.removeEventListener(eventName, callback);
             }
         });
-    }, [animation]);
+    }, [hasOwnProperty]);
     var animationConfig = React.useCallback(function (container) { return ({
@@ -67,53 +86,63 @@ container: container,
     };
-    var controls = tslib.__assign(tslib.__assign({}, animation), { play: React.useCallback(function () {
-            if (animation && animation.play) {
-                animation.play();
-                update({
-                    isPaused: false,
-                    isStopped: false
-                });
-            }
-        }, [animation]), playSegments: React.useCallback(function (newSegments, forceFlag) {
-            if (forceFlag === void 0) { forceFlag = true; }
-            if (animation && animation.playSegments) {
-                animation.playSegments(newSegments || segments, forceFlag);
-            }
-        }, [animation, segments]), stop: React.useCallback(function () {
-            if (animation && animation.stop) {
-                animation.stop();
-                update({
-                    isStopped: true,
-                    isPaused: true
-                });
-            }
-        }, [animation]), pause: React.useCallback(function () {
-            if (animation && animation.pause) {
-                animation.pause();
-                update({ isPaused: true });
-            }
-        }, [animation]), destroy: React.useCallback(function () {
-            if (animation && animation.destroy) {
-                animation.destroy();
-            }
-        }, [animation]), selectAnimation: React.useCallback(function (newAnimation) {
-            if (animation) {
-                update({
-                    isStopped: false,
-                    isPaused: false,
-                    animationData: newAnimation
-                });
-            }
-        }, [animation]) });
+    var play = React.useCallback(function () {
+        if (hasOwnProperty(animation, "play")) {
+            animation === null || animation === void 0 ? void 0 : animation.play();
+            update({
+                isPaused: false,
+                isStopped: false
+            });
+        }
+    }, [animation, hasOwnProperty]);
+    var playSegments = React.useCallback(function (newSegments, forceFlag) {
+        if (forceFlag === void 0) { forceFlag = true; }
+        if (hasOwnProperty(animation, "playSegments")) {
+            animation === null || animation === void 0 ? void 0 : animation.playSegments(newSegments || segments, forceFlag);
+        }
+    }, [animation, segments, hasOwnProperty]);
+    var stop = React.useCallback(function () {
+        if (hasOwnProperty(animation, "stop")) {
+            animation === null || animation === void 0 ? void 0 : animation.stop();
+            update({
+                isStopped: true,
+                isPaused: true
+            });
+        }
+    }, [animation, hasOwnProperty]);
+    var pause = React.useCallback(function () {
+        if (hasOwnProperty(animation, "pause")) {
+            animation === null || animation === void 0 ? void 0 : animation.pause();
+            update({ isPaused: true });
+        }
+    }, [animation, hasOwnProperty]);
+    var destroy = React.useCallback(function () {
+        if (hasOwnProperty(animation, "destroy")) {
+            animation === null || animation === void 0 ? void 0 : animation.destroy();
+        }
+    }, [animation, hasOwnProperty]);
+    var selectAnimation = React.useCallback(function (newAnimation) {
+        if (object.isPopulated(animation) && object.isPopulated(newAnimation)) {
+            update({
+                isStopped: false,
+                isPaused: false,
+                animationData: newAnimation
+            });
+        }
+    }, [animation]);
+    var controls = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, animation), { play: play,
+        playSegments: playSegments,
+        stop: stop,
+        pause: pause,
+        destroy: destroy,
+        selectAnimation: selectAnimation })); }, [animation, play, playSegments, stop, pause, destroy, selectAnimation]);
     React.useEffect(function () {
-        var anim = lottie.loadAnimation(animationConfig(lottieRef.current));
+        var anim = lottie__default['default'].loadAnimation(animationConfig(lottieRef.current));
+        registerEvents(anim, eventListeners);
+        update({ isLoaded: anim.isLoaded, isPaused: anim.isPaused });
         setAnimation(anim);
-        if (props.eventListeners)
-            registerEvents(props.eventListeners);
         return function () {
-            if (animation && animation.destroy)
-                animation.destroy();
+            if (hasOwnProperty(animation, "destroy"))
+                animation === null || animation === void 0 ? void 0 : animation.destroy();
+            deRegisterEvents(animation, eventListeners);
+            controls.destroy();
             setAnimation(undefined);
-            if (props.eventListeners)
-                deRegisterEvents(props.eventListeners);
-            controls.destroy();
             update({ animationData: {} });
@@ -124,22 +153,18 @@ };
         if (internalAnimationData !== state.animationData) {
-            if (props.eventListeners)
-                deRegisterEvents(props.eventListeners);
+            deRegisterEvents(animation, eventListeners);
             controls.destroy();
-            var newOptions = {
-                renderer: renderer,
+            var newOptions = tslib.__assign(tslib.__assign({}, animationConfig(lottieRef.current)), { renderer: renderer,
                 loop: loop,
                 autoplay: autoplay,
-                rendererSettings: rendererSettings,
-                animationData: state.animationData
-            };
+                rendererSettings: rendererSettings, animationData: state.animationData });
+            var anim = lottie__default['default'].loadAnimation(newOptions);
+            registerEvents(anim, eventListeners);
             setInternalAnimationData(state.animationData);
-            var anim = lottie.loadAnimation(tslib.__assign(tslib.__assign({}, animationConfig(lottieRef.current)), newOptions));
             setAnimation(anim);
-            if (props.eventListeners)
-                registerEvents(props.eventListeners);
         }
     }, [
+        animation,
         internalAnimationData,
         state.animationData,
-        props.eventListeners,
+        eventListeners,
         rendererSettings,
@@ -155,3 +180,3 @@ deRegisterEvents,
     ]);
-    var isStopped = state.isStopped, isPaused = state.isPaused;
+    var isStopped = state.isStopped, isPaused = state.isPaused, isLoaded = state.isLoaded;
     return [
@@ -161,3 +186,4 @@ lottieRef,
             isStopped: isStopped,
-            isPaused: isPaused
+            isPaused: isPaused,
+            isLoaded: isLoaded
         },
@@ -182,3 +208,3 @@ controls,
 var useForkRef = function (refA, refB) {
-    return React__default.useMemo(function () {
+    return React__default['default'].useMemo(function () {
         if (refA == null && refB == null) {
@@ -194,9 +220,9 @@ return null;
 
-var useEnhancedEffect = typeof window !== "undefined" ? React__default.useLayoutEffect : React__default.useEffect;
+var useEnhancedEffect = typeof window !== "undefined" ? React__default['default'].useLayoutEffect : React__default['default'].useEffect;
 function useEventCallback(fn) {
-    var ref = React__default.useRef(fn);
+    var ref = React__default['default'].useRef(fn);
     useEnhancedEffect(function () {
         ref.current = fn;
     });
-    return React__default.useCallback(function (event) { return (0, ref.current)(event); }, []);
+    return React__default['default'].useCallback(function (event) { return (0, ref.current)(event); }, []);
 }
@@ -207,9 +233,9 @@
 }
-var ClickAway = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.mouseEvent, mouseEvent = _b === void 0 ? "onClick" : _b, _c = _a.touchEvent, touchEvent = _c === void 0 ? "onTouchEnd" : _c, onClickAway = _a.onClickAway, _d = _a.onClickIn, onClickIn = _d === void 0 ? function () { return void 0; } : _d;
-    var _e = React__default.useState(false), clicked = _e[0], setClicked = _e[1];
-    var movedRef = React__default.useRef(false);
-    var nodeRef = React__default.useRef(null);
-    var mountedRef = React__default.useRef(false);
-    React__default.useEffect(function () {
+var ClickAway = React__default['default'].forwardRef(function (props, ref) {
+    var style = props.style, className = props.className, onClickAway = props.onClickAway, _a = props.mouseEvent, mouseEvent = _a === void 0 ? "onClick" : _a, _b = props.touchEvent, touchEvent = _b === void 0 ? "onTouchEnd" : _b, _c = props.onClickIn, onClickIn = _c === void 0 ? function () { return void 0; } : _c, children = props.children;
+    var _d = React__default['default'].useState(false), clicked = _d[0], setClicked = _d[1];
+    var movedRef = React__default['default'].useRef(false);
+    var nodeRef = React__default['default'].useRef(null);
+    var mountedRef = React__default['default'].useRef(false);
+    React__default['default'].useEffect(function () {
         mountedRef.current = true;
@@ -221,7 +247,7 @@ return function () {
     var handleNodeRef = useForkRef(nodeRef, ref);
-    var handleOwnRef = React__default.useCallback(function (instance) {
-        setRef(handleNodeRef, ReactDOM.findDOMNode(instance));
+    var handleOwnRef = React__default['default'].useCallback(function (instance) {
+        setRef(handleNodeRef, ReactDOM__default['default'].findDOMNode(instance));
     }, [handleNodeRef]);
     var handleRef = useForkRef(children.ref, handleOwnRef);
-    var handleClickIn = React__default.useCallback(function () {
+    var handleClickIn = React__default['default'].useCallback(function () {
         setClicked(function (state) { return !state; });
@@ -250,6 +276,6 @@ onClickIn();
     });
-    var handleTouchMove = React__default.useCallback(function () {
+    var handleTouchMove = React__default['default'].useCallback(function () {
         movedRef.current = true;
     }, []);
-    React__default.useEffect(function () {
+    React__default['default'].useEffect(function () {
         if (touchEvent !== false) {
@@ -267,3 +293,3 @@ var mappedTouchEvent_1 = mapEventPropToEvent(touchEvent);
     }, [handleClickAway, handleTouchMove, touchEvent]);
-    React__default.useEffect(function () {
+    React__default['default'].useEffect(function () {
         if (mouseEvent !== false) {
@@ -279,4 +305,4 @@ var mappedMouseEvent_1 = mapEventPropToEvent(mouseEvent);
     }, [handleClickAway, mouseEvent]);
-    var Wrapper = (React__default.createElement("div", { role: "presentation", onClick: handleClickIn }, children));
-    return React__default.createElement(React__default.Fragment, null, React__default.cloneElement(Wrapper, { ref: handleRef }));
+    var Wrapper = (React__default['default'].createElement("div", { role: "presentation", onClick: handleClickIn, style: style, className: className }, children));
+    return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].cloneElement(Wrapper, { ref: handleRef }));
 });
@@ -283,0 +309,0 @@

dist/index.esm.d.ts

@@ -8,3 +8,3 @@ /// <reference types="react" />
     height?: number;
-    style?: object;
+    style?: React.CSSProperties;
     title?: string;
@@ -22,2 +22,4 @@ className?: string;
     onClickIn: () => void;
+    style?: React.CSSProperties;
+    className?: string;
     children: React.ReactNode;
@@ -43,5 +45,4 @@ }
     getDuration?(inFrames?: boolean): number;
-    triggerEvent?<T = any>(name: AnimationEventName, args: T): void;
-    addEventListener?<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
-    removeEventListener?<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
+    addEventListener?<T = AnimationEventTypes>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
+    removeEventListener?<T = AnimationEventTypes>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
 }
@@ -56,26 +57,77 @@ interface LottieOptions extends AnimationConfigWithData {
 }
+type AnimationData = AnimationConfigWithPath | AnimationConfigWithData | Record<string, unknown>;
 interface LottieConfig extends Omit<AnimationConfig, "container"> {
     title?: string;
     options?: LottieOptions;
-    eventListeners?: EventListener[];
+    eventListeners?: EventListener;
     direction?: 1 | -1 | number;
     speed?: number;
     segments?: AnimationSegment | AnimationSegment[];
-    animationData?: AnimationConfigWithPath | AnimationConfigWithData | {};
+    animationData?: AnimationData;
 }
 type EventListener<T = any> = {
-    eventName: AnimationEventName;
-    callback: AnimationEventCallback<T>;
+    complete?: AnimationEventCallback<BMCompleteEvent>;
+    destroy?: AnimationEventCallback<BMDestroyEvent>;
+    loopComplete?: AnimationEventCallback<BMCompleteLoopEvent>;
+    enterFrame?: AnimationEventCallback<BMEnterFrameEvent>;
+    segmentStart?: AnimationEventCallback<BMSegmentStartEvent>;
+    config_ready?: AnimationEventCallback<T>;
+    data_ready?: AnimationEventCallback<T>;
+    data_failed?: AnimationEventCallback<T>;
+    DOMLoaded?: AnimationEventCallback;
+    error?: AnimationEventCallback<T>;
+    loaded_images?: AnimationEventCallback<T>;
 };
 interface LottieState {
-    animationData: AnimationConfigWithPath | AnimationConfigWithData | {};
+    animationData: AnimationData;
     isStopped: boolean;
     isPaused: boolean;
+    isLoaded: boolean;
 }
+type BMEventType<T = string> = {
+    type: T;
+};
+interface BMCompleteEvent extends BMEventType<"complete"> {
+    direction: number;
+}
+interface BMCompleteLoopEvent extends BMEventType<"loopComplete"> {
+    currentLoop: number;
+    direction: number;
+    totalLoops: boolean;
+}
+interface BMEnterFrameEvent extends BMEventType<"enterFrame"> {
+    currentTime: number;
+    direction: number;
+    totalTime: boolean;
+}
+interface BMDestroyEvent extends BMEventType<"destroy"> {
+    target: AnimationItem;
+}
+interface BMSegmentStartEvent extends BMEventType<"BMSegmentStartEvent"> {
+    firstFrame: number;
+    totalFrames: number;
+}
+interface BMRenderFrameErrorEvent extends BMEventType<"renderFrameError"> {
+    nativeError: Error;
+    currentTime: number;
+}
+interface BMConfigErrorEvent extends BMEventType<"configError"> {
+    nativeError: Error;
+}
+interface BMAnimationConfigErrorEvent extends BMEventType {
+    nativeError: Error;
+    currentTime: number;
+}
+type AnimationEventTypes = BMCompleteEvent | BMCompleteLoopEvent | BMEnterFrameEvent | BMDestroyEvent | BMRenderFrameErrorEvent | BMConfigErrorEvent | BMAnimationConfigErrorEvent | any;
 declare const Lottie: React.FC<LottieProps>;
-declare const useLottie: ({ renderer, loop, autoplay, rendererSettings, segments, animationData, ...props }: LottieConfig) => [React.MutableRefObject<HTMLDivElement | null>, {
-    isStopped: boolean;
-    isPaused: boolean;
-}, AnimationDispatch];
+declare const useLottie: ({ renderer, loop, autoplay, rendererSettings, segments, animationData, eventListeners }: LottieConfig) => [
+    React.MutableRefObject<HTMLDivElement | null>,
+    {
+        isStopped: boolean;
+        isPaused: boolean;
+        isLoaded: boolean;
+    },
+    AnimationDispatch
+];
 declare const ClickAway: React.ForwardRefExoticComponent<ClickAwayProps & React.RefAttributes<unknown>>;
-export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, AnimationDispatch, LottieOptions, Renderer, LottieConfig, EventListener, LottieState };
+export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, AnimationDispatch, LottieOptions, Renderer, AnimationData, LottieConfig, EventListener, LottieState, BMCompleteEvent, BMCompleteLoopEvent, BMEnterFrameEvent, BMDestroyEvent, BMSegmentStartEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent, BMAnimationConfigErrorEvent, AnimationEventTypes };

dist/index.esm.js

@@ -1,2 +0,2 @@
-import { __assign, __rest } from 'tslib';
+import { __assign } from 'tslib';
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
@@ -15,3 +15,5 @@ import lottie from 'lottie-web';
     var styles = useMemo(function () { return (__assign({ width: getSize(props.width), height: getSize(props.height), overflow: "hidden", margin: "0 auto", outline: "none" }, props.style)); }, [props.style, props.width, props.height, getSize]);
-    return (React.createElement("div", { ref: function (r) { return (props.lottieRef.current = r); }, className: props.className, style: styles, onKeyDown: props.onKeyDown, onClick: props.onClick, title: props.title, role: props.ariaRole, "aria-label": props.ariaLabel, "tab-index": "0" }));
+    return (React.createElement("div", { ref: function (r) {
+            props.lottieRef.current = r;
+        }, className: props.className, style: styles, onKeyDown: props.onKeyDown, onClick: props.onClick, title: props.title, role: props.ariaRole, "aria-label": props.ariaLabel, "tab-index": "0" }));
 };
@@ -26,24 +28,38 @@
 
+var object = {
+    isPopulated: function (obj) { return !!obj && typeof obj === "object" && Object.keys(obj).length > 0; }
+};
+
 var useLottie = function (_a) {
-    var _b = _a.renderer, renderer = _b === void 0 ? Renderer.html : _b, _c = _a.loop, loop = _c === void 0 ? true : _c, _d = _a.autoplay, autoplay = _d === void 0 ? true : _d, _e = _a.rendererSettings, rendererSettings = _e === void 0 ? {} : _e, _f = _a.segments, segments = _f === void 0 ? [] : _f, _g = _a.animationData, animationData = _g === void 0 ? {} : _g, props = __rest(_a, ["renderer", "loop", "autoplay", "rendererSettings", "segments", "animationData"]);
-    var _h = useState(undefined), animation = _h[0], setAnimation = _h[1];
+    var _b = _a.renderer, renderer = _b === void 0 ? Renderer.html : _b, _c = _a.loop, loop = _c === void 0 ? true : _c, _d = _a.autoplay, autoplay = _d === void 0 ? true : _d, _e = _a.rendererSettings, rendererSettings = _e === void 0 ? {} : _e, _f = _a.segments, segments = _f === void 0 ? [] : _f, _g = _a.animationData, animationData = _g === void 0 ? {} : _g, _h = _a.eventListeners, eventListeners = _h === void 0 ? {} : _h;
+    var _j = useState(undefined), animation = _j[0], setAnimation = _j[1];
     var lottieRef = React.useRef(null);
-    var _j = useState(animationData), internalAnimationData = _j[0], setInternalAnimationData = _j[1];
-    var _k = useState({
+    var _k = useState(animationData), internalAnimationData = _k[0], setInternalAnimationData = _k[1];
+    var _l = useState({
         animationData: animationData,
         isStopped: false,
-        isPaused: false
-    }), state = _k[0], dispatch = _k[1];
-    var registerEvents = useCallback(function (eventListeners) {
-        eventListeners.forEach(function (eventListener) {
-            animation && animation.addEventListener(eventListener.eventName, eventListener.callback);
+        isPaused: false,
+        isLoaded: false
+    }), state = _l[0], dispatch = _l[1];
+    var hasOwnProperty = useCallback(function (anim, prop) { return object.isPopulated(anim) && !!anim[prop]; }, []);
+    var registerEvents = useCallback(function (anim, eventListeners) {
+        if (!object.isPopulated(eventListeners))
+            return;
+        Object.entries(eventListeners).forEach(function (_a) {
+            var eventName = _a[0], callback = _a[1];
+            if (hasOwnProperty(anim, "addEventListener") && callback !== undefined) {
+                anim === null || anim === void 0 ? void 0 : anim.addEventListener(eventName, callback);
+            }
         });
-    }, [animation]);
-    var deRegisterEvents = useCallback(function (eventListeners) {
-        eventListeners.forEach(function (eventListener) {
-            if (animation && animation.removeEventListener) {
-                animation.removeEventListener(eventListener.eventName, eventListener.callback);
+    }, [hasOwnProperty]);
+    var deRegisterEvents = useCallback(function (anim, eventListeners) {
+        if (!object.isPopulated(eventListeners))
+            return;
+        Object.entries(eventListeners).forEach(function (_a) {
+            var eventName = _a[0], callback = _a[1];
+            if (hasOwnProperty(anim, "removeEventListener")) {
+                anim === null || anim === void 0 ? void 0 : anim.removeEventListener(eventName, callback);
             }
         });
-    }, [animation]);
+    }, [hasOwnProperty]);
     var animationConfig = useCallback(function (container) { return ({
@@ -60,53 +76,63 @@ container: container,
     };
-    var controls = __assign(__assign({}, animation), { play: useCallback(function () {
-            if (animation && animation.play) {
-                animation.play();
-                update({
-                    isPaused: false,
-                    isStopped: false
-                });
-            }
-        }, [animation]), playSegments: useCallback(function (newSegments, forceFlag) {
-            if (forceFlag === void 0) { forceFlag = true; }
-            if (animation && animation.playSegments) {
-                animation.playSegments(newSegments || segments, forceFlag);
-            }
-        }, [animation, segments]), stop: useCallback(function () {
-            if (animation && animation.stop) {
-                animation.stop();
-                update({
-                    isStopped: true,
-                    isPaused: true
-                });
-            }
-        }, [animation]), pause: useCallback(function () {
-            if (animation && animation.pause) {
-                animation.pause();
-                update({ isPaused: true });
-            }
-        }, [animation]), destroy: useCallback(function () {
-            if (animation && animation.destroy) {
-                animation.destroy();
-            }
-        }, [animation]), selectAnimation: useCallback(function (newAnimation) {
-            if (animation) {
-                update({
-                    isStopped: false,
-                    isPaused: false,
-                    animationData: newAnimation
-                });
-            }
-        }, [animation]) });
+    var play = useCallback(function () {
+        if (hasOwnProperty(animation, "play")) {
+            animation === null || animation === void 0 ? void 0 : animation.play();
+            update({
+                isPaused: false,
+                isStopped: false
+            });
+        }
+    }, [animation, hasOwnProperty]);
+    var playSegments = useCallback(function (newSegments, forceFlag) {
+        if (forceFlag === void 0) { forceFlag = true; }
+        if (hasOwnProperty(animation, "playSegments")) {
+            animation === null || animation === void 0 ? void 0 : animation.playSegments(newSegments || segments, forceFlag);
+        }
+    }, [animation, segments, hasOwnProperty]);
+    var stop = useCallback(function () {
+        if (hasOwnProperty(animation, "stop")) {
+            animation === null || animation === void 0 ? void 0 : animation.stop();
+            update({
+                isStopped: true,
+                isPaused: true
+            });
+        }
+    }, [animation, hasOwnProperty]);
+    var pause = useCallback(function () {
+        if (hasOwnProperty(animation, "pause")) {
+            animation === null || animation === void 0 ? void 0 : animation.pause();
+            update({ isPaused: true });
+        }
+    }, [animation, hasOwnProperty]);
+    var destroy = useCallback(function () {
+        if (hasOwnProperty(animation, "destroy")) {
+            animation === null || animation === void 0 ? void 0 : animation.destroy();
+        }
+    }, [animation, hasOwnProperty]);
+    var selectAnimation = useCallback(function (newAnimation) {
+        if (object.isPopulated(animation) && object.isPopulated(newAnimation)) {
+            update({
+                isStopped: false,
+                isPaused: false,
+                animationData: newAnimation
+            });
+        }
+    }, [animation]);
+    var controls = useMemo(function () { return (__assign(__assign({}, animation), { play: play,
+        playSegments: playSegments,
+        stop: stop,
+        pause: pause,
+        destroy: destroy,
+        selectAnimation: selectAnimation })); }, [animation, play, playSegments, stop, pause, destroy, selectAnimation]);
     useEffect(function () {
         var anim = lottie.loadAnimation(animationConfig(lottieRef.current));
+        registerEvents(anim, eventListeners);
+        update({ isLoaded: anim.isLoaded, isPaused: anim.isPaused });
         setAnimation(anim);
-        if (props.eventListeners)
-            registerEvents(props.eventListeners);
         return function () {
-            if (animation && animation.destroy)
-                animation.destroy();
+            if (hasOwnProperty(animation, "destroy"))
+                animation === null || animation === void 0 ? void 0 : animation.destroy();
+            deRegisterEvents(animation, eventListeners);
+            controls.destroy();
             setAnimation(undefined);
-            if (props.eventListeners)
-                deRegisterEvents(props.eventListeners);
-            controls.destroy();
             update({ animationData: {} });
@@ -117,22 +143,18 @@ };
         if (internalAnimationData !== state.animationData) {
-            if (props.eventListeners)
-                deRegisterEvents(props.eventListeners);
+            deRegisterEvents(animation, eventListeners);
             controls.destroy();
-            var newOptions = {
-                renderer: renderer,
+            var newOptions = __assign(__assign({}, animationConfig(lottieRef.current)), { renderer: renderer,
                 loop: loop,
                 autoplay: autoplay,
-                rendererSettings: rendererSettings,
-                animationData: state.animationData
-            };
+                rendererSettings: rendererSettings, animationData: state.animationData });
+            var anim = lottie.loadAnimation(newOptions);
+            registerEvents(anim, eventListeners);
             setInternalAnimationData(state.animationData);
-            var anim = lottie.loadAnimation(__assign(__assign({}, animationConfig(lottieRef.current)), newOptions));
             setAnimation(anim);
-            if (props.eventListeners)
-                registerEvents(props.eventListeners);
         }
     }, [
+        animation,
         internalAnimationData,
         state.animationData,
-        props.eventListeners,
+        eventListeners,
         rendererSettings,
@@ -148,3 +170,3 @@ deRegisterEvents,
     ]);
-    var isStopped = state.isStopped, isPaused = state.isPaused;
+    var isStopped = state.isStopped, isPaused = state.isPaused, isLoaded = state.isLoaded;
     return [
@@ -154,3 +176,4 @@ lottieRef,
             isStopped: isStopped,
-            isPaused: isPaused
+            isPaused: isPaused,
+            isLoaded: isLoaded
         },
@@ -198,5 +221,5 @@ controls,
 }
-var ClickAway = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.mouseEvent, mouseEvent = _b === void 0 ? "onClick" : _b, _c = _a.touchEvent, touchEvent = _c === void 0 ? "onTouchEnd" : _c, onClickAway = _a.onClickAway, _d = _a.onClickIn, onClickIn = _d === void 0 ? function () { return void 0; } : _d;
-    var _e = React.useState(false), clicked = _e[0], setClicked = _e[1];
+var ClickAway = React.forwardRef(function (props, ref) {
+    var style = props.style, className = props.className, onClickAway = props.onClickAway, _a = props.mouseEvent, mouseEvent = _a === void 0 ? "onClick" : _a, _b = props.touchEvent, touchEvent = _b === void 0 ? "onTouchEnd" : _b, _c = props.onClickIn, onClickIn = _c === void 0 ? function () { return void 0; } : _c, children = props.children;
+    var _d = React.useState(false), clicked = _d[0], setClicked = _d[1];
     var movedRef = React.useRef(false);
@@ -267,3 +290,3 @@ var nodeRef = React.useRef(null);
     }, [handleClickAway, mouseEvent]);
-    var Wrapper = (React.createElement("div", { role: "presentation", onClick: handleClickIn }, children));
+    var Wrapper = (React.createElement("div", { role: "presentation", onClick: handleClickIn, style: style, className: className }, children));
     return React.createElement(React.Fragment, null, React.cloneElement(Wrapper, { ref: handleRef }));
@@ -270,0 +293,0 @@ });

package.json

 {
   "name": "react-lottie-hook",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "license": "MIT",
@@ -35,4 +35,4 @@ "description": "React Lottie written with react hooks",
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0"
   },
@@ -43,39 +43,41 @@ "resolutions": {
   "dependencies": {
-    "lottie-web": "^5.6.7",
+    "lottie-web": "^5.7.3",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "tslib": "^1.11.1"
+    "tslib": "^2.0.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-json": "^4.0.2",
-    "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^10.0.2",
-    "@testing-library/react-hooks": "^3.2.1",
-    "@testing-library/user-event": "^10.0.1",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^13.9.8",
-    "@types/react": "^16.9.31",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "@wessberg/rollup-plugin-ts": "^1.2.23",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/dom": "7.21.4",
+    "@testing-library/react": "^11.0.4",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/user-event": "^12.1.6",
+    "@types/jest": "^26.0.14",
+    "@types/node": "^14.11.2",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/parser": "^4.2.0",
+    "@wessberg/rollup-plugin-ts": "^1.3.4",
+    "eslint": "^7.9.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jest": "^24.0.2",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "global": "^4.4.0",
-    "husky": "^4.2.3",
-    "jest": "^25.2.4",
+    "husky": "^4.3.0",
+    "jest": "^26.4.2",
     "jest-canvas-mock": "^2.2.0",
-    "lint-staged": "^10.1.1",
-    "prettier": "^2.0.2",
+    "lint-staged": "^10.4.0",
+    "prettier": "^2.1.2",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.3.2",
+    "rollup": "^2.27.1",
     "rollup-plugin-clear": "^2.0.7",
-    "ts-jest": "^25.3.0",
+    "ts-jest": "^26.4.0",
     "tslib": "^1.11.1",
-    "typescript": "^3.8.3"
+    "typescript": "^4.0.3"
   },
@@ -82,0 +84,0 @@ "husky": {

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96659

increased by19.2%

Lines of code

827

increased by22.52%

Worsened metrics

Dev dependency count

33

increased by6.45%

Number of package files

8

decreased by-11.11%

Number of medium quality alerts

2

increased by100%

Number of lines in readme file

0

decreased by-100%

Dependency changes

• + Addedtslib@2.8.1(transitive)

• - Removedtslib@1.14.1(transitive)

• Updatedlottie-web@^5.7.3

• Updatedtslib@^2.0.1