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.

In development the library logs a console notice when an animation starts by itself and moves for more than five seconds, because accessibility guidelines ask that such motion can be paused (WCAG 2.2.2). Any pause affordance answers it: your own button, or <LottieControls> when a full bar fits the page. The notice reads the loop setting as the animation loads, so motion armed later escapes it: turning loop on from a subscription is yours to check. 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. Left unsized, the default svg renderer fills the width at the animation's own aspect ratio, like an image; an element whose height resolves to zero shows nothing.