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