Getting Started

Introduction

dotLottie-react is a React component that allows you to easily embed Lottie animations in your React applications. It is a wrapper around the dotLottie-web.

Installation

Terminal window
npm install @lottiefiles/dotlottie-react

Basic Usage

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
return (
<DotLottieReact
src="path/to/animation.lottie"
loop
autoplay
/>
);
};

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.

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
const dotLottieRef = React.useRef(null);
return (
<div>
<DotLottieReact
src="path/to/animation.lottie"
loop
autoplay
dotLottieRefCallback={(dotLottie) => {
dotLottieRef.current = dotLottie;
}}
/>
<div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
<button onClick={() => dotLottieRef.current?.play()}>Play</button>
<button onClick={() => dotLottieRef.current?.pause()}>Pause</button>
<button onClick={() => dotLottieRef.current?.stop()}>Stop</button>
<button onClick={() => dotLottieRef.current?.setFrame(30)}>Seek to frame 30</button>
</div>
</div>
);
};

Listening to Events

You can listen to player events using the dotLottieRefCallback prop:

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
const App = () => {
const onPlay = () => {
console.log('Animation start playing');
}
const onPause = () => {
console.log('Animation paused');
}
const onComplete = () => {
console.log('Animation completed');
}
const onFrameChange = ({currentFrame}) => {
console.log('Current frame: ', currentFrame);
}
return (
<DotLottieReact
src="path/to/animation.lottie"
loop
autoplay
dotLottieRefCallback={(dotLottie) => {
dotLottie.addEventListener('play', onPlay);
dotLottie.addEventListener('pause', onPause);
dotLottie.addEventListener('complete', onComplete);
dotLottie.addEventListener('frame', onFrameChange);
}}
/>
);
};