@lottiefiles/dotlottie-react

@lottiefiles/dotlottie-react

🚧 Beta Alert: We're still refining! The APIs in this package may undergo changes.

Contents

• Introduction
  • What is dotLottie?
• Installation
• Usage
• Live Examples
• APIs
  • DotLottieReactProps
• 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

• Basic Example

APIs

DotLottieReactProps

Property name	Type	Required	Default	Description
autoplay	boolean		false	Auto-starts the animation on load.
loop	boolean		false	Determines if the animation should loop.
src	string		undefined	URL to the animation data (.json or .lottie).
speed	number		1	Animation playback speed. 1 is regular speed.
data	string | ArrayBuffer		undefined	Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
mode	string		"forward"	Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse".
backgroundColor	string		undefined	Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"),
segments	[number, number]		[0, totalFrames - 1]	Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
renderConfig	RenderConfig		{}	Configuration for rendering the animation.

RenderConfig

The renderConfig object accepts the following properties:

Property name	Type	Required	Default	Description
devicePixelRatio	number		window.devicePixelRatio | 1	The device pixel ratio.

Development

Setup

pnpm install

Dev

pnpm dev

Build

pnpm build