@lottiefiles/dotlottie-react v0.14.1

@lottiefiles/dotlottie-react

Contents

• Introduction
  • What is dotLottie?
• Installation
• Usage
• Live Examples
• APIs
  • DotLottieReactProps
• Custom Playback Controls
• Listening to Events
• Development
  • Setup
  • Dev
  • Build

Introduction

A React library for rendering lottie and dotLottie animations in the browser.

What is dotLottie?

dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".

Learn more about dotLottie.

Installation

npm install @lottiefiles/dotlottie-react

Usage

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

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

Live Examples

• Getting Started
• Custom Playback Controls

APIs

DotLottieReactProps

The DotLottieReactProps extends the HTMLCanvasElement Props and accepts all the props that the HTMLCanvasElement accepts. In addition to that, it also accepts the following props:

RenderConfig

The renderConfig object accepts the following properties:

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

You can find the list of methods that can be used to control the playback of the animation here.

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

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

Development

Setup

pnpm install

Dev

pnpm dev

Build

pnpm build