Package Exports

@lottiefiles/dotlottie-react
@lottiefiles/dotlottie-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lottiefiles/dotlottie-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@lottiefiles/dotlottie-react

npm npm bundle size npm NPM

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

Introduction
- What is dotLottie?
Installation
Usage
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
    />
  );
};

APIs

DotLottieReactProps

Property name	Type	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