Lottie animations in React: one component for the easy path, the whole engine when you need control.
npm i lottie-reactreact 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.
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.
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.
Guides, live examples and the full API reference: lottiereact.com.
Coming from v2? The migration guide maps every v2 surface onto v3.
Issues and pull requests are welcome. CONTRIBUTING.md carries the setup and the checks.