Getting Started with the React Player

In this tutorial, you will install the React player and display your first Lottie animation in a React application.

Requirements

React version 16.8.0 or higher
Node.js and npm or yarn installed

Installation

Install the package using your preferred package manager:

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

The DotLottieReact component exposes a dotLottieRefCallback prop that provides a reference to the dotLottie web player instance. Use this to build custom playback controls:

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

Use the dotLottieRefCallback to listen to player events:

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

Next Steps

Props Reference — All component props and configuration options
Examples — Practical usage examples