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

dejetem

JONATHAN SIMON

Posted on April 12, 2024

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
dejetem
JONATHAN SIMON

Posted on April 12, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React Basics~unit test/custom hook
webdev React Basics~unit test/custom hook

October 27, 2024

React Basics~unit test/async test
webdev React Basics~unit test/async test

October 24, 2024

React Basics~unit test/user event
webdev React Basics~unit test/user event

October 21, 2024

React Basics~unit test/ui
webdev React Basics~unit test/ui

October 20, 2024