gem-hunter
Language: TypeScript
Lottie animations in React: one component for the easy path, the whole engine when you need control.
Lottie animations in React: one component for the easy path, the whole engine when you need control.
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.
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.