react-lottie-hook - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.cjs.d.ts

@@ -130,3 +130,3 @@ /// <reference types="react" />
 type AnimationData = AnimationConfigWithPath | AnimationConfigWithData | Record<string, unknown>;
-interface LottieConfig extends Omit<AnimationConfig, "container"> {
+interface LottieConfig<T extends Renderer = Renderer.svg> extends Omit<AnimationConfig<T>, "container"> {
     title?: string;
@@ -192,3 +192,3 @@ options?: LottieOptions;
 declare const Lottie: React.FC<LottieProps>;
-declare const useLottie: ({ renderer, loop, autoplay, rendererSettings, segments, animationData, eventListeners }: LottieConfig) => [
+type UseLottie<T extends Renderer = Renderer.svg> = (config: LottieConfig<T>) => [
     React.MutableRefObject<HTMLDivElement | null>,
@@ -198,3 +198,4 @@ UseLottieState,
 ];
+declare const useLottie: UseLottie;
 declare const ClickAway: React.ForwardRefExoticComponent<ClickAwayProps & React.RefAttributes<unknown>>;
 export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, UseLottieState, AnimationDispatch, LottieOptions, Renderer, AnimationData, LottieConfig, EventListener, LottieState, BMCompleteEvent, BMCompleteLoopEvent, BMEnterFrameEvent, BMDestroyEvent, BMSegmentStartEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent, BMAnimationConfigErrorEvent, AnimationEventTypes };

dist/index.cjs.js

@@ -65,3 +65,3 @@ 'use strict';
 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, _h = _a.eventListeners, eventListeners = _h === void 0 ? {} : _h;
+    var _b = _a.renderer, renderer = _b === void 0 ? exports.Renderer.svg : _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];
@@ -326,6 +326,3 @@ var lottieRef = React__default['default'].useRef(null);
             controls.destroy();
-            var newOptions = tslib.__assign(tslib.__assign({}, animationConfig(lottieRef.current)), { renderer: renderer,
-                loop: loop,
-                autoplay: autoplay,
-                rendererSettings: rendererSettings, animationData: state.animationData });
+            var newOptions = tslib.__assign(tslib.__assign({}, animationConfig(lottieRef.current)), { renderer: renderer, loop: loop, autoplay: autoplay, rendererSettings: rendererSettings, animationData: state.animationData });
             var anim = lottie__default['default'].loadAnimation(newOptions);
@@ -332,0 +329,0 @@ registerEvents(anim, eventListeners);

dist/index.esm.d.ts

@@ -130,3 +130,3 @@ /// <reference types="react" />
 type AnimationData = AnimationConfigWithPath | AnimationConfigWithData | Record<string, unknown>;
-interface LottieConfig extends Omit<AnimationConfig, "container"> {
+interface LottieConfig<T extends Renderer = Renderer.svg> extends Omit<AnimationConfig<T>, "container"> {
     title?: string;
@@ -192,3 +192,3 @@ options?: LottieOptions;
 declare const Lottie: React.FC<LottieProps>;
-declare const useLottie: ({ renderer, loop, autoplay, rendererSettings, segments, animationData, eventListeners }: LottieConfig) => [
+type UseLottie<T extends Renderer = Renderer.svg> = (config: LottieConfig<T>) => [
     React.MutableRefObject<HTMLDivElement | null>,
@@ -198,3 +198,4 @@ UseLottieState,
 ];
+declare const useLottie: UseLottie;
 declare const ClickAway: React.ForwardRefExoticComponent<ClickAwayProps & React.RefAttributes<unknown>>;
 export { Lottie, useLottie, ClickAway, LottieProps, ClickAwayProps, LottieAnimationItem, UseLottieState, AnimationDispatch, LottieOptions, Renderer, AnimationData, LottieConfig, EventListener, LottieState, BMCompleteEvent, BMCompleteLoopEvent, BMEnterFrameEvent, BMDestroyEvent, BMSegmentStartEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent, BMAnimationConfigErrorEvent, AnimationEventTypes };

dist/index.esm.js

@@ -55,3 +55,3 @@ import { __assign } from 'tslib';
 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, _h = _a.eventListeners, eventListeners = _h === void 0 ? {} : _h;
+    var _b = _a.renderer, renderer = _b === void 0 ? Renderer.svg : _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];
@@ -316,6 +316,3 @@ var lottieRef = React.useRef(null);
             controls.destroy();
-            var newOptions = __assign(__assign({}, animationConfig(lottieRef.current)), { renderer: renderer,
-                loop: loop,
-                autoplay: autoplay,
-                rendererSettings: rendererSettings, animationData: state.animationData });
+            var newOptions = __assign(__assign({}, animationConfig(lottieRef.current)), { renderer: renderer, loop: loop, autoplay: autoplay, rendererSettings: rendererSettings, animationData: state.animationData });
             var anim = lottie.loadAnimation(newOptions);
@@ -322,0 +319,0 @@ registerEvents(anim, eventListeners);

package.json

 {
   "name": "react-lottie-hook",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "React Lottie written with react hooks",
+  "engines": {
+    "node": ">= 12"
+  },
   "keywords": [
@@ -29,3 +32,5 @@ "react",
     "lint:fix": "yarn lint --quiet --fix",
-    "clean": "rm -rf ./dist"
+    "clean": "rm -rf ./dist",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
@@ -43,37 +48,46 @@ "files": [
   "dependencies": {
-    "lottie-web": "^5.7.3",
-    "tslib": "^2.2.0"
+    "lottie-web": "^5.7.13",
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.0",
+    "@babel/core": "^7.15.5",
+    "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@testing-library/dom": "^7.30.4",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.2",
-    "@testing-library/user-event": "^13.1.8",
-    "@types/jest": "^26.0.23",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@testing-library/dom": "^8.5.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
     "@types/node": "^15.0.2",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.22.1",
-    "@typescript-eslint/parser": "^4.22.1",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "@wessberg/rollup-plugin-ts": "^1.3.14",
-    "eslint": "^7.26.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-jest": "^24.4.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
-    "jest": "26.6.3",
+    "jest": "^27.2.0",
     "jest-canvas-mock": "^2.3.1",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.2.1",
+    "lint-staged": "^11.1.2",
+    "node-notifier": "^10.0.0",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.47.0",
+    "rollup": "^2.56.3",
     "rollup-plugin-clear": "^2.0.7",
-    "ts-jest": "^26.5.6",
-    "typescript": "^4.2.4"
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.4.3"
   },
@@ -90,2 +104,2 @@ "husky": {
   }
-}
+}

README.md

 # react-lottie-hook
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/master/LICENSE)
-[![npm version](https://img.shields.io/static/v1?label=npm&message=v0.2.0&color=informational)](https://www.npmjs.com/package/react-lottie-hook) 
-[![React Version](https://img.shields.io/static/v1?label=react&message=>=16.8.0&color=informational)](https://github.com/facebook/react/blob/master/CHANGELOG.md)
-[![React Version](https://img.shields.io/static/v1?label=react&message=17.0.0&color=informational)](https://github.com/facebook/react/blob/master/CHANGELOG.md)
-![CI](https://github.com/developertown/react-lottie-hook/workflows/Continuous%20Integration/badge.svg?branch=master)
+[![npm version](https://img.shields.io/static/v1?label=npm&message=v0.4.0&color=informational)](https://www.npmjs.com/package/react-lottie-hook) 
+[![React Version](https://img.shields.io/static/v1?label=react&message=>=16.8|>=17&color=informational)](https://github.com/facebook/react/blob/master/CHANGELOG.md)
+![CI](https://github.com/JaysQubeXon/react-lottie-hook/workflows/Continuous%20Integration/badge.svg?branch=master)
 
 Lottie react hook with runtime animation controls.
 
-examples: · [github](https://github.com/developertown/react-lottie-hook/tree/master/examples/react-lottie-hook-ts) · [codesandbox](https://codesandbox.io/s/lottie-with-hooks-ft8dl) ·
+[codesandbox](https://codesandbox.io/s/lottie-with-hooks-ft8dl)
 
@@ -13,0 +12,0 @@ # Introduction

No alert changes

Worsened metrics

Total package byte prevSize

144634

-0.51%

Dev dependency count

40

29.03%

Number of package files

8

-11.11%

Lines of code

1296

-0.31%

Number of lines in readme file

112

-0.88%

Dependency changes

• Updated

  lottie-web@^5.7.13

• Updated

  tslib@^2.3.1