Getting started

In this tutorial, we'll add the dotLottie React player to a React application and render a looping Lottie animation. By the end, you'll have a working DotLottieReact component playing an animation on your page.

Prerequisites

• A React project using React 16.8.0 or higher

• Node.js and npm installed

Step 1: Install the package

Add @lottiefiles/dotlottie-react to your project:

When the install finishes, you should see @lottiefiles/dotlottie-react listed under dependencies in your package.json.

Step 2: Render your first animation

In a component file — for example, App.jsx — import DotLottieReact and point it at an animation:

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

const App = () => {
  return (
    <DotLottieReact src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" loop autoplay />
  );
};

Keep the sample src URL for now, or swap in the URL of your own .lottie or .json animation file.

Now start your development server and open the app in your browser. You should see the animation start playing on its own and repeat continuously — autoplay starts playback on load, and loop keeps it going.

What you've accomplished

You've installed the dotLottie React player and rendered a looping Lottie animation in your React app. From here you can:

• Build playback controls and handle player events

• Browse the props reference for every configuration option

• Explore the API reference to access the full player instance