Gathering detailed insights and metrics for @lottiefiles/dotlottie-react
Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
Installations
npm install @lottiefiles/dotlottie-reactDeveloper Guide
BETA
Typescript
Yes
Module System
ESM, UMD
Node Version
20.18.2
NPM Version
10.8.2
Score
97.1
Supply Chain
99.1
Quality
95.2
Maintenance
100
Vulnerability
100
License
Releases
362
@lottiefiles/dotlottie-web@0.39.0-beta.9
@lottiefiles/dotlottie-web@0.39.0-beta.9
Updated on Feb 11, 2025
@lottiefiles/dotlottie-wc@0.5.0-beta.9
@lottiefiles/dotlottie-wc@0.5.0-beta.9
Updated on Feb 11, 2025
@lottiefiles/dotlottie-vue@0.6.0-beta.9
@lottiefiles/dotlottie-vue@0.6.0-beta.9
Updated on Feb 11, 2025
@lottiefiles/dotlottie-svelte@0.5.0-beta.9
@lottiefiles/dotlottie-svelte@0.5.0-beta.9
Updated on Feb 11, 2025
@lottiefiles/dotlottie-solid@0.2.0-beta.9
@lottiefiles/dotlottie-solid@0.2.0-beta.9
Updated on Feb 11, 2025
@lottiefiles/dotlottie-react@0.13.0-beta.9
@lottiefiles/dotlottie-react@0.13.0-beta.9
Updated on Feb 11, 2025
Contributors
21
Languages
7
TypeScript
JavaScript
CSS
Svelte
HTML
Vue
Shell
TypeScript (78.1%)
JavaScript (15.39%)
CSS (2.67%)
Svelte (1.88%)
HTML (1.02%)
Vue (0.62%)
Shell (0.31%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
1,726,756
Last Day
21,994
Last Week
115,562
Last Month
469,548
Last Year
1,724,540
GitHub Statistics
MIT License
240 Stars
293 Commits
15 Forks
11 Watchers
130 Branches
21 Contributors
Updated on Feb 10, 2025
Bundle Size
418.99 kB
Minified
50.34 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.13.0
Package Id
@lottiefiles/dotlottie-react@0.13.0
Unpacked Size
1.97 MB
Size
180.47 kB
File Count
8
NPM Version
10.8.2
Node Version
20.18.2
Published on
Feb 10, 2025
Total Downloads
Cumulative downloads
Total Downloads
1,726,756
Last Day
8.9%
21,994
Compared to previous day
Last Week
4%
115,562
Compared to previous week
Last Month
60%
469,548
Compared to previous month
Last Year
77,722.2%
1,724,540
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
@lottiefiles/dotlottie-react
Contents
- Introduction
- Installation
- Usage
- Live Examples
- APIs
- Custom Playback Controls
- Listening to Events
- Development
Introduction
A React library for rendering lottie and dotLottie animations in the browser.
What is dotLottie?
dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".
Installation
1npm install @lottiefiles/dotlottie-react
Usage
1import React from 'react'; 2import { DotLottieReact } from '@lottiefiles/dotlottie-react'; 3 4const App = () => { 5 return ( 6 <DotLottieReact 7 src="path/to/animation.lottie" 8 loop 9 autoplay 10 /> 11 ); 12};
Live Examples
APIs
DotLottieReactProps
The DotLottieReactProps extends the HTMLCanvasElement Props and accepts all the props that the HTMLCanvasElement accepts. In addition to that, it also accepts the following props:
| Property name | Type | Required | Default | Description | |
|---|---|---|---|---|---|
autoplay | boolean | false | Auto-starts the animation on load. | ||
loop | boolean | false | Determines if the animation should loop. | ||
src | string | undefined | URL to the animation data (.json or .lottie). | ||
speed | number | 1 | Animation playback speed. 1 is regular speed. | ||
data | string | ArrayBuffer | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. | ||
mode | string | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce". | ||
backgroundColor | string | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), | ||
segment | [number, number] | [0, totalFrames - 1] | Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. | ||
renderConfig | RenderConfig | {} | Configuration for rendering the animation. | ||
playOnHover | boolean | false | Determines if the animation should play on mouse hover and pause on mouse out. | ||
dotLottieRefCallback | React.RefCallback<DotLottie | null> | undefined | Callback function that receives a reference to the dotLottie web player instance. | ||
useFrameInterpolation | boolean | true | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. | ||
marker | string | undefined | The Lottie named marker to play. |
RenderConfig
The renderConfig object accepts the following properties:
| Property name | Type | Required | Default | Description |
|---|---|---|---|---|
devicePixelRatio | number | window.devicePixelRatio | 1 | The device pixel ratio. | |
renderConfig.autoResize | boolean | true | Determines if the canvas should resize automatically to its container |
Custom Playback Controls
DotLottieReact component makes it easy to build custom playback controls for the animation. It exposes a dotLottieRefCallback prop that can be used to get a reference to the dotLottie web player instance. This instance can be used to control the playback of the animation using the methods exposed by the dotLottie web player instance.
Here is an example:
1import React from 'react'; 2import { DotLottieReact } from '@lottiefiles/dotlottie-react'; 3 4const App = () => { 5 const [dotLottie, setDotLottie] = React.useState(null); 6 7 const dotLottieRefCallback = (dotLottie) => { 8 setDotLottie(dotLottie); 9 }; 10 11 function play(){ 12 if(dotLottie){ 13 dotLottie.play(); 14 } 15 } 16 17 function pause(){ 18 if(dotLottie){ 19 dotLottie.pause(); 20 } 21 } 22 23 function stop(){ 24 if(dotLottie){ 25 dotLottie.stop(); 26 } 27 } 28 29 function seek(){ 30 if(dotLottie){ 31 dotLottie.setFrame(30); 32 } 33 } 34 35 return ( 36 <DotLottieReact 37 src="path/to/animation.lottie" 38 loop 39 autoplay 40 dotLottieRefCallback={dotLottieRefCallback} 41 /> 42 <div> 43 <button onClick={play}>Play</button> 44 <button onClick={pause}>Pause</button> 45 <button onClick={stop}>Stop</button> 46 <button onClick={seek}>Seek to frame no. 30</button> 47 </div> 48 ); 49};
You can find the list of methods that can be used to control the playback of the animation here.
Listening to Events
DotLottieReact component can receive a dotLottieRefCallback prop that can be used to get a reference to the dotLottie web player instance. This reference can be used to listen to player events emitted by the dotLottie web instance.
Here is an example:
1import React from 'react';
2import { DotLottieReact } from '@lottiefiles/dotlottie-react';
3
4const App = () => {
5 const [dotLottie, setDotLottie] = React.useState(null);
6
7 React.useEffect(() => {
8
9 // This function will be called when the animation starts playing.
10 function onPlay() {
11 console.log('Animation start playing');
12 }
13
14 // This function will be called when the animation is paused.
15 function onPause() {
16 console.log('Animation paused');
17 }
18
19 // This function will be called when the animation is completed.
20 function onComplete() {
21 console.log('Animation completed');
22 }
23
24 function onFrameChange({currentFrame}) {
25 console.log('Current frame: ', currentFrame);
26 }
27
28 // Listen to events emitted by the DotLottie instance when it is available.
29 if (dotLottie) {
30 dotLottie.addEventListener('play', onPlay);
31 dotLottie.addEventListener('pause', onPause);
32 dotLottie.addEventListener('complete', onComplete);
33 dotLottie.addEventListener('frame', onFrameChange);
34 }
35
36 return () => {
37 // Remove event listeners when the component is unmounted.
38 if (dotLottie) {
39 dotLottie.removeEventListener('play', onPlay);
40 dotLottie.removeEventListener('pause', onPause);
41 dotLottie.removeEventListener('complete', onComplete);
42 dotLottie.removeEventListener('frame', onFrameChange);
43 }
44 };
45 }, [dotLottie]);
46
47
48 const dotLottieRefCallback = (dotLottie) => {
49 setDotLottie(dotLottie);
50 };
51
52 return (
53 <DotLottieReact
54 src="path/to/animation.lottie"
55 loop
56 autoplay
57 dotLottieRefCallback={dotLottieRefCallback}
58 />
59 );
60};dotLottie instance exposes multiple events that can be listened to. You can find the list of events here.
Development
Setup
1pnpm install
Dev
1pnpm dev
Build
1pnpm build
No vulnerabilities found.
No security vulnerabilities found.