react-lottie-hook
Advanced tools
Comparing version
@@ -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 }; |
@@ -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); |
@@ -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 }; |
@@ -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); |
{ | ||
"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": { | ||
} | ||
} | ||
} |
# react-lottie-hook | ||
[](https://github.com/facebook/react/blob/master/LICENSE) | ||
[](https://www.npmjs.com/package/react-lottie-hook) | ||
[](https://github.com/facebook/react/blob/master/CHANGELOG.md) | ||
[](https://github.com/facebook/react/blob/master/CHANGELOG.md) | ||
 | ||
[](https://www.npmjs.com/package/react-lottie-hook) | ||
[](https://github.com/facebook/react/blob/master/CHANGELOG.md) | ||
 | ||
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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
144634
-0.51%40
29.03%8
-11.11%1296
-0.31%112
-0.88%Updated
Updated