# How do I use a Lottie animation in React?

> Install a React player, import your animation and render it. The two common choices are lottie-react, which wraps lottie-web and takes JSON through animationData, and @lottiefiles/dotlottie-react, which plays .lottie and JSON files through a src prop. Control playback through a ref.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-use-lottie-in-react/

## Key takeaways

- npm install lottie-react or @lottiefiles/dotlottie-react
- lottie-react: <Lottie animationData={json} loop />
- dotLottie: <DotLottieReact src="/file.lottie" autoplay loop />
- Use a ref for play, pause, speed and segments
- In Next.js, load the player client-side only

## Frequently asked questions

### Should I import JSON or load it from a URL?

Import small files for simplicity. Load large files from a URL so they do not bloat your JavaScript bundle.

### How do I control a Lottie from a button in React?

Pass a ref (lottieRef in lottie-react, dotLottieRefCallback in dotLottie React) and call play, pause or setSpeed on it.

### Does Lottie work with React Native?

Yes, through lottie-react-native, which uses the native iOS and Android players.

### Why does my Lottie re-render and restart?

Passing a new animationData object on every render restarts it. Import the JSON once or memoise it.

## Related

- [Fix Lottie in Next.js](https://www.exodeui.com/questions/lottie-react-nextjs-document-is-not-defined)
- [Lottie runtime in React](https://www.exodeui.com/learn/lottie-runtime-react)
- [Best React animation libraries](https://www.exodeui.com/best-react-animation-libraries)
- [How to know when a Lottie completes](https://www.exodeui.com/questions/how-to-know-when-lottie-animation-completes)