Voozh

Lottie animations in React are straightforward once you know the two main libraries. Here's the complete setup — from installing the package to controlling playback with hooks.

Option 1: @lottiefiles/dotlottie-react (Recommended)

This is the modern approach. Supports both .json and .lottie files.

npm install @lottiefiles/dotlottie-react

Basic usage:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export default function App() {
 return (
 <DotLottieReact
 src="/animation.json"
 loop
 autoplay
 style={{ width: 300, height: 300 }}
 />
 );
}

The src can point to a local file in your public/ folder or a remote URL.

Option 2: lottie-web + react-lottie

The older approach. Still widely used.

npm install react-lottie

import Lottie from 'react-lottie';
import animationData from './animation.json';

export default function App() {
 const options = {
 loop: true,
 autoplay: true,
 animationData,
 };
 return <Lottie options={options} height={300} width={300} />;
}

Controlling Playback

With dotlottie-react, use the dotLottie ref:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { useState } from 'react';

export default function ControlledAnimation() {
 const [dotLottie, setDotLottie] = useState(null);
 return (
 <div>
 <DotLottieReact
 src="/animation.json"
 dotLottieRefCallback={setDotLottie}
 style={{ width: 200, height: 200 }}
 />
 <button onClick={() => dotLottie?.play()}>Play</button>
 <button onClick={() => dotLottie?.pause()}>Pause</button>
 <button onClick={() => dotLottie?.stop()}>Stop</button>
 </div>
 );
}

Trigger on Hover

export default function HoverAnimation() {
 const [dotLottie, setDotLottie] = useState(null);
 return (
 <div
 onMouseEnter={() => dotLottie?.play()}
 onMouseLeave={() => dotLottie?.stop()}
 >
 <DotLottieReact
 src="/animation.json"
 dotLottieRefCallback={setDotLottie}
 loop={false}
 style={{ width: 100, height: 100 }}
 />
 </div>
 );
}

Where to Get Free Lottie JSON Files

IconKing has 500+ free Lottie animations — UI icons, loaders, social media, flags, illustrations. No signup required.

Use the Lottie preview tool to check timing before integrating. The editor lets you change colors and speed in-browser.

Converting to Other Formats

When you need the same animation in GIF (for email), MP4, or WebM:

All free at iconking.net.

Performance Tips

SVG renderer for small animations. For icons and UI elements, SVG is crisper than canvas at small sizes.

Bundle size. @lottiefiles/dotlottie-react is ~100KB. lottie-web is ~500KB. For production, dotLottie is the better choice.

Browse free animations at iconking.net/all-assets, preview at iconking.net/preview, drop the JSON in your public/ folder — done in under 5 minutes.

URL: https://dev.to/fazalshah/how-to-use-lottie-animations-in-react-2025-guide-35ga

⇱ How to Use Lottie Animations in React (2025 Guide) - DEV Community