Rendering( or How to Render) Animation in JSON format with LottieFiles animation in React application

A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. lottiefiles.

Lottie is a library that parses animations exported as JSON and renders them natively on the web, iOS, and Android.

Using JSON format animation in a React application is straightforward, you need to install one library called lottie-web.

Here's how you can render JSON format animation in a React component using Lottie:

The first step, install the lottie-web library using npm or yarn:
npm install --save lottie-web for npm
yarn add lottie-web for yarn

The second step, Import the library and the JSON animation file in your React component:

import React, { useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import yourAnimationData from './your_animation_data.json'; // Replace 'your_animation_data.json' with the path to your own JSON animation file

export default function MyLottieAnimation() {
  const animationContainer = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: animationContainer.current,
      renderer: 'svg', // Change the renderer type if needed (canvas, html)
      loop: true,
      autoplay: true,
      animationData: yourAnimationData  // Your own JSON animation data
    });

    return () => {
      anim.destroy();// Clean up when component unmounts
    };
  }, []);
  return (
    <div className="App">
      <h1>Animation in JSON format</h1>
      <h2>with LottieFiles animation in React application</h2>
      <div ref={animationContainer}></div>
    </div>
  );
}

For the above block of the code we first import the React and two React hooks, useEffect and useRef. Then we import the lottie-web library we installed and next, we import the JSON format animation into our component.

lottie-web:Lottie is a library that parses animations exported as JSON and renders them natively on the web, iOS, and Android.

useEffect: useEffect is a React Hook that lets you synchronize a component with an external system.

useRef: useRef is a React Hook that lets you reference a value that's not needed for rendering.

Conclusion
This post talks about how to render JSON format animation in a React component using Lottie and it's a straightforward process.

Now you can render the animationContainer in your part of the MyLottieAnimation component you want to display the animation.
Here is a link to a sandbox

You can also create a reusable component for Lottie animation so you don't have to repeat the base configuration, all you have to do is pass your yourAnimationData as a prop to the reusable component and then pass the yourAnimationData to the animationData inside the useEffect hook.