Lottie in React

In React, use dotlottie-react from LottieFiles. It draws .lottie and .json files on a canvas and works with React 17, 18 and 19.

Install

npm install @lottiefiles/dotlottie-react

Checked on 7 October 2026: version 0.20.0 on npm.

A working example

This plays the Toggle switch animation from the free library. Download its dotLottie file, then:

1. Put toggle-switch.lottie in public/animations/.

2. Paste this component and render it.

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

// People who ask for less motion see a still frame.
const still = typeof window !== 'undefined'
  && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// A frame 41% of the way in, where the animation is complete.
const showStill = (player) => {
  if (still && player) player.addEventListener('load', () => player.setFrame(Math.round(0.41 * (player.totalFrames - 1))));
};

export function ToggleSwitch() {
  return (
    <DotLottieReact
      src="/animations/toggle-switch.lottie"
      autoplay={!still}
      loop
      dotLottieRefCallback={showStill}
      role="img"
      aria-label="Toggle switch"
      style={{ width: 200, height: 200 }}
    />
  );
}

'use client' at the top is for the Next.js App Router. Outside Next.js you can delete that line.

For people who ask for less motion, autoplay is off and showStill moves the player to a frame 41% of the way in, where the animation is complete once the file loads. It is defined outside the component, so React passes the same function every render.

Every animation in the library has this code on its page with its own file name filled in.

Common problems

Changing autoplay later does nothing

The player reads autoplay once, when it's created. To start or stop it later, keep the player you get from dotLottieRefCallback and call play() or pause() on it.

In Next.js it plays even with reduced motion on

Keep 'use client' at the top of the file. Without it, the component is a Server Component, the motion check runs on the server where there is no window, and autoplay stays on.

The file returns a 404

Files in the public folder are served from the root of your site, so public/animations/toggle-switch.lottie is served at /animations/toggle-switch.lottie. Don't put public in the src path.

It shows at the wrong size

The player draws on a canvas that resizes to its box. Give it a width and a height, or a width and an aspectRatio, in style.

Free downloads

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

The same code for other platforms: HTML, React Native, Flutter, SwiftUI, Android Compose, Webflow, Framer, WordPress.