Gathering detailed insights and metrics for react-lottie-hook
Gathering detailed insights and metrics for react-lottie-hook
Installations
npm install react-lottie-hookDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>= 12
Node Version
14.17.6
NPM Version
6.14.15
Score
68.3
Supply Chain
93.1
Quality
75.7
Maintenance
100
Vulnerability
100
License
Languages
3
TypeScript
JavaScript
CSS
TypeScript (92.52%)
JavaScript (5.55%)
CSS (1.93%)
Developer
Download Statistics
Total Downloads
310,917
Last Day
44
Last Week
631
Last Month
4,583
Last Year
37,612
GitHub Statistics
5 Stars
62 Commits
1 Forks
1 Watchers
3 Branches
4 Contributors
Updated on Jun 23, 2022
Bundle Size
306.97 kB
Minified
77.58 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.5.0
Package Id
react-lottie-hook@0.5.0
Unpacked Size
144.63 kB
Size
26.88 kB
File Count
8
NPM Version
6.14.15
Node Version
14.17.6
Total Downloads
Cumulative downloads
Total Downloads
310,917
Dependencies
2
Dev Dependencies
40
@babel/core@rollup/plugin-commonjs@rollup/plugin-json@storybook/addon-actions@storybook/addon-essentials@storybook/addon-links@storybook/react@testing-library/dom@testing-library/jest-dom@testing-library/react@testing-library/react-hooks@testing-library/user-event@types/jest@types/node@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parserrollup-plugin-tsbabel-loadereslinteslint-config-prettiereslint-plugin-jesteslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookshuskyjestjest-canvas-mocklint-stagednode-notifierprettierreactreact-domreact-test-rendererrimrafrolluprollup-plugin-clearts-jesttypescript
react-lottie-hook
Lottie react hook with runtime animation controls.
Introduction
Lottie is a library for the Web, Android and iOS that parses Adobe After Effects animations through a plugin called bodymovin and exported as JSON; rendering natively on each platform.
Getting Started
Add it with your prefered package manager:
yarn add react-lottie-hook
npm i react-lottie-hook
Usage Instructions
This library main exports a useLottie hook and supplies also a standard Lottie component but you are not required to use the latter.
The useLottie hook requires a configuration object of type LottieConfig to be supplied to it and in return you will get an array with a ref to the animation container, state of the animation and the control actions, respectively.
1import React from "react"; 2import { useLottie, Lottie } from "react-lottie-hook"; 3import animationData from "./animation.json"; 4 5const App = () => { 6 const [lottieRef, { isPaused, isStopped }, controls] = useLottie({ 7 renderer: "svg", 8 rendererSettings: { 9 preserveAspectRatio: "xMidYMid slice", 10 progressiveLoad: false, 11 }, 12 animationData, 13 }); 14 15 return <Lottie lottieRef={ref} width={400} height={400} />; 16};
The exported Lottie component has a type of LottieProps and the minimum props it requires is a lottieRef from the useLottie hook.
Lottie Component props:
| props | type | default |
|---|---|---|
| lottieRef: | React.MutableRefObject<HTMLElement | null> | |
| width? | number | 200px |
| height? | number | 200px |
| style? | object | |
| title? | string | |
| className? | string | |
| ariaRole? | string | |
| ariaLabel? | string | |
| onKeyDown? | (e: React.KeyboardEvent) => void | |
| onClick? | (e: React.MouseEvent<HTMLElement, MouseEvent>) |
EventListeners:
Among the options you can pass useLottie is an eventListeners object as follows:
1const eventListeners: EventLisener = { 2 /** triggered only if loop is set to true */ 3 loopCompleted: (data) => { console.log('Animation Loop Completed'); }, 4 /** triggered when animation is destroyed */ 5 destroy: : (data) => { console.log('Animation Destroyed'); }, 6 /** triggered when loop is set to false */ 7 complete: (data) => { console.log('Animation Complete'); }, 8}; 9 10const [lottieRef, { isPaused, isStopped }, controls] = useLottie({ 11 renderer: "svg", 12 loop: false, // default true 13 rendererSettings: { 14 preserveAspectRatio: "xMidYMid slice", 15 progressiveLoad: false, 16 }, 17 animationData, 18 eventListeners, 19}); 20
Contributors
 Noam Gabriel Jacobson |
 Alex Billingsley |
 Arno (H) Welgemoed |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
Found 1/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build_and_test.yml:1
- Warn: no topLevel permission defined: .github/workflows/storybook.yaml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build_and_test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/hanorine/react-lottie-hook/build_and_test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build_and_test.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/hanorine/react-lottie-hook/build_and_test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/hanorine/react-lottie-hook/storybook.yaml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/storybook.yaml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/hanorine/react-lottie-hook/storybook.yaml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/storybook.yaml:15
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 3 are checked with a SAST tool
Reason
56 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
- Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More