# lottie-react

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

Latest version **3.1.2** (published 2026-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install lottie-react
pnpm add lottie-react
yarn add lottie-react
bun add lottie-react
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2026-09-07 |
| First published | 2017-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 358 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 968 |
| Author | David Gamote |
| Maintainers | gamote |
| Keywords | lottie, lottie react, lottie animation, react animation, lottie component, lottie hook, lottie player, tree-shakeable |

## Links

- npm: https://www.npmjs.com/package/lottie-react
- Repository: https://github.com/Gamote/lottie-react
- Homepage: https://lottiereact.com
- Issues: https://github.com/Gamote/lottie-react/issues
- npm.io page: https://npm.io/package/lottie-react

## Dependencies (1)

- [lottie-web](https://npm.io/package/lottie-web.md) ^5.13.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 3.1.2 (latest) — 2026-09-07
- 2.4.2 (legacy) — 2026-08-16
- 3.1.1 — 2026-08-27
- 3.1.0 — 2026-08-16
- 3.0.0 — 2026-08-15
- 3.0.0-rc.0 — 2026-08-15
- 3.0.0-beta.0 — 2026-08-15
- 2.4.1 — 2025-01-22
- 2.4.0 — 2023-02-19
- 2.3.1 — 2022-06-23
- 2.3.0 — 2022-06-15
- 2.2.1 — 2022-01-18
- 2.2.0 — 2022-01-16
- 2.1.0 — 2020-09-25
- 2.0.0 — 2020-07-08
- … 8 more at https://npm.io/package/lottie-react/versions

## README

<p align="center">
  <a href="https://lottiereact.com"><img src="https://raw.githubusercontent.com/Gamote/lottie-react/main/website/public/lottie-logo.svg" width="140" alt="lottie-react" /></a>
</p>

<h1 align="center">lottie-react</h1>

<p align="center">Lottie animations in React: one component for the easy path, the whole engine when you need control.</p>

<p align="center">
  <a href="https://www.npmjs.com/package/lottie-react"><img src="https://img.shields.io/npm/v/lottie-react.svg" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/lottie-react"><img src="https://img.shields.io/npm/dm/lottie-react.svg" alt="npm downloads" /></a>
  <a href="https://github.com/Gamote/lottie-react/actions/workflows/check.yml"><img src="https://img.shields.io/github/actions/workflow/status/Gamote/lottie-react/check.yml" alt="build status" /></a>
  <a href="https://codecov.io/github/Gamote/lottie-react"><img src="https://codecov.io/github/Gamote/lottie-react/graph/badge.svg" alt="coverage" /></a>
  <a href="https://github.com/Gamote/lottie-react/blob/main/LICENSE.md"><img src="https://img.shields.io/npm/l/lottie-react.svg" alt="license" /></a>
</p>

## Installation

```bash
npm i lottie-react
```

`react` and `react-dom` at 18.2 or newer are peer dependencies; [lottie-web](https://github.com/airbnb/lottie-web) comes with it.
The package is tree-shakeable: an import pays only for what it reaches.

## Usage

### The component

```tsx
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

```tsx
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](https://lottiereact.com)**.

Coming from v2? The [migration guide](https://lottiereact.com/docs/migration) maps every v2 surface onto v3.

## Contributing

Issues and pull requests are welcome.
[CONTRIBUTING.md](https://github.com/Gamote/lottie-react/blob/main/CONTRIBUTING.md) carries the setup and the checks.

## License

[MIT](https://github.com/Gamote/lottie-react/blob/main/LICENSE.md)

---
_Source: https://npm.io/package/lottie-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._