@lottiefiles/dotlottie-react
🚧 Beta Alert: We're still refining! The APIs in this package may undergo changes.
Contents
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 | 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