How to Use Lottie Animations in React (2025 Guide)

npm install @lottiefiles/dotlottie-react

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

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

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} />;
}

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>
  );
}

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>
  );
}