Usage

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:

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

const App = () => {
  const [dotLottie, setDotLottie] = React.useState(null);

  const dotLottieRefCallback = (dotLottie) => {
    setDotLottie(dotLottie);
  };

  function play(){
    if(dotLottie){
      dotLottie.play();
    }
  }

  function pause(){
    if(dotLottie){
      dotLottie.pause();
    }
  }

  function stop(){
    if(dotLottie){
      dotLottie.stop();
    }
  }

  function seek(){
    if(dotLottie){
      dotLottie.setFrame(30);
    }
  }

  return (
    <DotLottieReact src="path/to/animation.lottie"
      loop
      autoplay
      dotLottieRefCallback={dotLottieRefCallback}
    />
    <div>
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={stop}>Stop</button>
      <button onClick={seek}>Seek to frame no. 30</button>
    </div>
  );
};

Listenining 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:

import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

const App = () => {
  const [dotLottie, setDotLottie] = React.useState(null);

  React.useEffect(() => {

    // This function will be called when the animation starts playing.
    function onPlay() {
      console.log('Animation start playing');
    }

    // This function will be called when the animation is paused.
    function onPause() {
      console.log('Animation paused');
    }

    // This function will be called when the animation is completed.
    function onComplete() {
      console.log('Animation completed');
    }

    function onFrameChange({currentFrame}) {
      console.log('Current frame: ', currentFrame);
    }

    // Listen to events emitted by the DotLottie instance when it is available.
    if (dotLottie) {
      dotLottie.addEventListener('play', onPlay);
      dotLottie.addEventListener('pause', onPause);
      dotLottie.addEventListener('complete', onComplete);
      dotLottie.addEventListener('frame', onFrameChange);
    }

    return () => {
      // Remove event listeners when the component is unmounted.
      if (dotLottie) {
        dotLottie.addEventListener('play', onPlay);
        dotLottie.addEventListener('pause', onPause);
        dotLottie.addEventListener('complete', onComplete);
        dotLottie.addEventListener('frame', onFrameChange);
      }
    };
  }, [dotLottie]);


  const dotLottieRefCallback = (dotLottie) => {
    setDotLottie(dotLottie);
  };

  return (
    <DotLottieReact
      src="path/to/animation.lottie"
      loop
      autoplay
      dotLottieRefCallback={dotLottieRefCallback}
    />
  );
};

dotLottie instance exposes multiple events that can be listened to. You can find the list of events here.