lottie-react

What is lottie-react?

The lottie-react npm package is a React wrapper for Lottie animations, which allows you to easily integrate and control Lottie animations in your React applications. Lottie is a library for rendering Adobe After Effects animations in real-time, which are exported as JSON files using the Bodymovin plugin.

What are lottie-react's main functionalities?

Basic Animation

This feature allows you to render a basic Lottie animation in your React component. You simply import the Lottie component and the animation JSON file, then use the Lottie component with the animationData prop.

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

const BasicAnimation = () => {
  return <Lottie animationData={animationData} />;
};

export default BasicAnimation;

Controlled Animation

This feature allows you to control the playback of the Lottie animation. In this example, a button is used to toggle the animation between play and pause states using the isPaused prop.

import React, { useState } from 'react';
import Lottie from 'lottie-react';
import animationData from './path/to/animation.json';

const ControlledAnimation = () => {
  const [isPaused, setIsPaused] = useState(false);

  return (
    <div>
      <Lottie animationData={animationData} isPaused={isPaused} />
      <button onClick={() => setIsPaused(!isPaused)}>
        {isPaused ? 'Play' : 'Pause'}
      </button>
    </div>
  );
};

export default ControlledAnimation;

Looping Animation

This feature allows you to set the animation to loop continuously. By setting the loop prop to true, the animation will restart automatically after it finishes.

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

const LoopingAnimation = () => {
  return <Lottie animationData={animationData} loop={true} />;
};

export default LoopingAnimation;

Event Listeners

This feature allows you to add event listeners to the Lottie animation. In this example, the onComplete event listener is used to log a message when the animation completes.

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

const AnimationWithEvents = () => {
  const handleComplete = () => {
    console.log('Animation completed');
  };

  return <Lottie animationData={animationData} onComplete={handleComplete} />;
};

export default AnimationWithEvents;

Other packages similar to lottie-react

react-lottie

react-lottie is another React wrapper for Lottie animations. It provides similar functionality to lottie-react, allowing you to render and control Lottie animations in your React applications. However, lottie-react is often preferred for its more modern API and better performance.

lottie-web

lottie-web is the core library for rendering Lottie animations in web applications. While it is not specifically designed for React, it can be used with React by manually integrating it into your components. lottie-react simplifies this process by providing a dedicated React component.

react-lottie-player

react-lottie-player is another alternative for integrating Lottie animations in React applications. It offers a similar set of features to lottie-react, including support for controlling playback and adding event listeners. Some developers prefer react-lottie-player for its additional customization options.

README

lottie-react

This project is meant to give developers full control over Lottie instance with minimal implementation by wrapping lottie-web in a Component or Hook that can be easily used in React applications.

Installation

• Make sure you have the peer-dependencies installed: react and react-dom.

  Note: This library is using React Hooks so the minimum version required for both react and react-dom is v16.8.0.

• Install lottie-react using yarn

  yarn add lottie-react
  

  or npm

  npm i lottie-react
  

Usage

Using the component (try it)

import React from "react";
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;

export default App;

Using the Hook (try it)

import React from "react";
import { useLottie } from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const App = () => {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true
  };

  const { View } = useLottie(options);

  return <>{View}</>;
};

export default App;

📄 Documentation

Checkout the documentation at https://lottiereact.com for more information and examples.

Tests

Run the tests using the yarn test command.

Coverage report

-----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------

Contribution

Any questions or suggestions? Use the Discussions tab. Any issues? Don't hesitate to document it in the Issues tab, and we will do our best to investigate it and fix it. Any solutions? You are very welcomed to open a pull request.

👩‍💻 v3 is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under the v3 branch. And of course, you are encouraged to contribute. :)

Thank you for investing your time in contributing to our project! ✨

Projects to check out

• lottie-web - Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
• lottie-android - Lottie implementation for Android
• lottie-ios - Lottie implementation for iOS
• lottie-react-native - Lottie implementation for React Native
• LottieFiles - Are you looking for animations files? LottieFiles has a lot of them!

License

lottie-react is available under the MIT license.

Thanks to David Probst Jr for the animations used in the examples.