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

react-lottie-hook

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lottie-hook - npm Package Compare versions

Comparing version

to
0.4.0

5

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 };

7

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);

@@ -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
[![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: &middot; [github](https://github.com/developertown/react-lottie-hook/tree/master/examples/react-lottie-hook-ts) &middot; [codesandbox](https://codesandbox.io/s/lottie-with-hooks-ft8dl) &middot;
[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