dotLottie React Player Examples

Playback Controls with State

This example uses React state to store the dotLottie instance, providing playback control through buttons:

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

Event Handling with useEffect

This example demonstrates the recommended pattern for listening to events with proper cleanup using useEffect:

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

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

  React.useEffect(() => {

    function onPlay() {
      console.log('Animation start playing');
    }

    function onPause() {
      console.log('Animation paused');
    }

    function onComplete() {
      console.log('Animation completed');
    }

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

    if (dotLottie) {
      dotLottie.addEventListener('play', onPlay);
      dotLottie.addEventListener('pause', onPause);
      dotLottie.addEventListener('complete', onComplete);
      dotLottie.addEventListener('frame', onFrameChange);
    }

    return () => {
      if (dotLottie) {
        dotLottie.removeEventListener('play', onPlay);
        dotLottie.removeEventListener('pause', onPause);
        dotLottie.removeEventListener('complete', onComplete);
        dotLottie.removeEventListener('frame', onFrameChange);
      }
    };
  }, [dotLottie]);


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

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

The dotLottie web player instance exposes multiple events that can be listened to. You can find the list of events in the JS player documentation.

dotLottie React Player Examples

dotLottie React Player Examples

Playback Controls with State

Event Handling with useEffect

Related Topics