Rendering

src takes an animation two ways: the parsed file itself, or a place to fetch it from.

Pass the animation object

Import the file and pass it when the animation ships with your code:

import { Lottie } from "lottie-react";import anim from "../../../../public/anim.json";export function SrcAsObject() {  return <Lottie src={anim} autoplay loop />;}

The animation reloads only when the content of src changes, so an object written inline at the call site is safe.

Fetch from a URL

Pass a string to fetch the animation from a served path or a full URL:

<Lottie src="/animations/hero.json" />
<Lottie src="https://example.com/hero.json" />

While the fetch is in flight the animation is in its loading state; a failed fetch ends in error. Loading and errors covers showing both.

Start it

Set autoplay to start playback as soon as the animation is ready. It is off by default:

<Lottie src="/anim.json" autoplay />

autoplay is a load-time prop: change it and the animation reloads with the new setting.

On a device that asks for reduced motion, autoplay holds instead of starting. The animation still loads and play() still works, so offer a control instead of starting motion for the reader.

Repeat it

loop takes true to repeat forever, a number of repeats, or false, the default. A number counts the repeats after the first play, so loop={3} plays four times in all:

import { Lottie } from "lottie-react";export function LoopCount() {  return <Lottie src="/anim.json" autoplay loop={3} />;}

It is reactive: change the prop and the running animation follows.

Size it

The animation fills its element, so sizing the element is sizing the animation:

import { Lottie } from "lottie-react";export function Sizing() {  return (    <Lottie src="/anim.json" autoplay loop style={{ width: 160, height: 96 }} />  );}

There is no width or height prop. Use className or style, and give the element a height: an element with no height shows nothing.