lottie-react

Lottie animations in React: one component for the easy path, the whole engine when you need control.

Installation

npm i lottie-react

react and react-dom at 18.2 or newer are peer dependencies; lottie-web comes with it. The package is tree-shakeable: an import pays only for what it reaches.

Usage

The component

import { Lottie } from "lottie-react";

export function Hero() {
  return <Lottie src="/hero.json" autoplay loop />;
}

src takes a path, a URL, or the parsed animation object. The animation fills its element, so size the element and you are done.

The hook

import { useLottie } from "lottie-react";

export function Hero() {
  const lottie = useLottie({ src: "/hero.json", autoplay: true, loop: true });
  return <div ref={lottie.setDisplayRef} style={{ height: 300 }} />;
}

The hook returns the instance: values that re-render with the animation, commands like play and seek, and a subscription point.

Documentation

Guides, live examples and the full API reference: lottiereact.com.

Coming from v2? The migration guide maps every v2 surface onto v3.

Contributing

Issues and pull requests are welcome. CONTRIBUTING.md carries the setup and the checks.

License

MIT