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.
Core Takeaway
npm install lottie-react or @lottiefiles/dotlottie-react
import Lottie from 'lottie-react';
import loader from './loader.json';
export function Loader() {
return <Lottie animationData={loader} loop style={{ width: 80, height: 80 }} />;
}
dotLottie for React
npm install @lottiefiles/dotlottie-react
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export function Hero() {
return <DotLottieReact src="/animations/hero.lottie" autoplay loop />;
}
Which to pick
lottie-react is simple and widely used, and works with JSON you import into your bundle. dotLottie React loads compressed .lottie files from a URL and supports dotLottie features such as themes and state machines. For many small icons, importing JSON is fine. For large illustrations, loading a .lottie file from a URL keeps your JavaScript bundle smaller.
Common problems
In Next.js you will see "document is not defined" unless the player loads only in the browser. Long animations that never stop waste CPU, so pause them when hidden. And if you write a lot of code to switch between segments on clicks and state, a state-machine format may be simpler. ExodeUI's React package (npm package exodeui) takes inputs from your app state directly; we make ExodeUI.
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.