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