How to Use Lottie Animations in React (2025 Guide)

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.

推荐订阅源

DEV Community