Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lottiefiles/dotlottie-react

Package Overview
Dependencies
Maintainers
4
Versions
82
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lottiefiles/dotlottie-react

React wrapper around the dotlottie-web library

  • 0.5.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
90K
increased by1.37%
Maintainers
4
Weekly downloads
 
Created
Source

@lottiefiles/dotlottie-react

npm npm bundle size npm NPM

Contents

  • Introduction
  • Installation
  • Usage
  • Live Examples
  • APIs
  • Custom Playback Controls
  • Listening to Events
  • Development

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

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:

Property nameTypeRequiredDefaultDescription
autoplaybooleanfalseAuto-starts the animation on load.
loopbooleanfalseDetermines if the animation should loop.
srcstringundefinedURL to the animation data (.json or .lottie).
speednumber1Animation playback speed. 1 is regular speed.
datastring | ArrayBufferundefinedAnimation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
modestring"forward"Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce".
backgroundColorstringundefinedBackground color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"),
segment[number, number][0, totalFrames - 1]Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
renderConfigRenderConfig{}Configuration for rendering the animation.
playOnHoverbooleanfalseDetermines if the animation should play on mouse hover and pause on mouse out.
dotLottieRefCallbackReact.RefCallback<DotLottie | null>undefinedCallback function that receives a reference to the dotLottie web player instance.
useFrameInterpolationbooleantrueDetermines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true.
autoResizeCanvasbooleantrueDetermines if the canvas should resize automatically to its container
markerstringundefinedThe Lottie named marker to play.
RenderConfig

The renderConfig object accepts the following properties:

Property nameTypeRequiredDefaultDescription
devicePixelRationumberwindow.devicePixelRatio | 1The device pixel ratio.

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

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 [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.

Development

Setup

pnpm install

Dev

pnpm dev

Build

pnpm build

Keywords

FAQs

Package last updated on 21 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc