Gathering detailed insights and metrics for lottie-react
Gathering detailed insights and metrics for lottie-react
A lightweight React library for rendering complex After Effects animations in real time using Lottie.
Installations
npm install lottie-reactDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, UMD
Node Version
22.13.0
NPM Version
10.9.2
Releases
9
Languages
2
TypeScript
JavaScript
TypeScript (86.45%)
JavaScript (13.55%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
NOASSERTION License
893 Stars
172 Commits
67 Forks
5 Watchers
4 Branches
10 Contributors
Updated on Jul 13, 2025
Maintainers
1
Package Meta Information
Latest Version
2.4.1
Package Id
lottie-react@2.4.1
Unpacked Size
228.17 kB
Size
51.04 kB
File Count
13
NPM Version
10.9.2
Node Version
22.13.0
Published on
Jan 22, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
46
@babel/core@babel/preset-env@babel/preset-react@jest/types@rollup/plugin-commonjs@rollup/plugin-node-resolve@testing-library/jest-dom@testing-library/react@testing-library/react-hooks@types/jest@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parserautoprefixerbabel-loadercoverallsdoczeslinteslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-promiseeslint-plugin-reacteslint-plugin-react-hooksget-pkg-repogh-pagesjestjest-canvas-mocksassnpm-run-allprettierreactreact-domreact-test-rendererrolluprollup-plugin-babelrollup-plugin-dtsrollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-terserts-jestts-nodetslibtypescript
lottie-react
This project is meant to give developers full control over Lottie instance with minimal implementation by wrapping lottie-web in a Component or Hook that can be easily used in React applications.
Installation
-
Make sure you have the peer-dependencies installed:
reactandreact-dom.Note: This library is using React Hooks so the minimum version required for both react and react-dom is v16.8.0.
-
Install
lottie-reactusing yarn1yarn add lottie-reactor npm
1npm i lottie-react
Usage
Using the component (try it)
1import React from "react"; 2import Lottie from "lottie-react"; 3import groovyWalkAnimation from "./groovyWalk.json"; 4 5const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />; 6 7export default App;
Using the Hook (try it)
1import React from "react"; 2import { useLottie } from "lottie-react"; 3import groovyWalkAnimation from "./groovyWalk.json"; 4 5const App = () => { 6 const options = { 7 animationData: groovyWalkAnimation, 8 loop: true 9 }; 10 11 const { View } = useLottie(options); 12 13 return <>{View}</>; 14}; 15 16export default App;
📄 Documentation
Checkout the documentation at https://lottiereact.com for more information and examples.
Tests
Run the tests using the yarn test command.
Coverage report
1-----------------------------|---------|----------|---------|---------|------------------- 2File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 3-----------------------------|---------|----------|---------|---------|------------------- 4All files | 100 | 100 | 100 | 100 | 5 components | 100 | 100 | 100 | 100 | 6 Lottie.ts | 100 | 100 | 100 | 100 | 7 hooks | 100 | 100 | 100 | 100 | 8 useLottie.tsx | 100 | 100 | 100 | 100 | 9 useLottieInteractivity.tsx | 100 | 100 | 100 | 100 | 10-----------------------------|---------|----------|---------|---------|-------------------
Contribution
Any questions or suggestions? Use the Discussions tab. Any issues? Don't hesitate to document it in the Issues tab, and we will do our best to investigate it and fix it. Any solutions? You are very welcomed to open a pull request.
👩💻
v3is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under thev3branch. And of course, you are encouraged to contribute. :)
Thank you for investing your time in contributing to our project! ✨
Projects to check out
- lottie-web - Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
- lottie-android - Lottie implementation for Android
- lottie-ios - Lottie implementation for iOS
- lottie-react-native - Lottie implementation for React Native
- LottieFiles - Are you looking for animations files? LottieFiles has a lot of them!
License
lottie-react is available under the MIT license.
Thanks to David Probst Jr for the animations used in the examples.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
Found 4/15 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
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
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 20 are checked with a SAST tool
Reason
53 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
- Warn: Project is vulnerable to: GHSA-mj46-r4gr-5x83
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
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