Adding Lottie Files in Your React Application

Adding Lottie Files in Your React Application

With Create-react-app and Typescript

Lottie is a neat way of bringing life to any webpage with minimum effort. This tutorial will add a Lottie JSON file to our React Application.

But before that Let us understand what are Lottie files.

What are Lottie files?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate and ship a Lottie in the easiest way possible.

Below is an example.

Why use Lottie?

Lottie is 200% faster and lighter than traditional *.gif files and can be easily formatted and optimized using a JSON-Formator. It is highly Scalable and can reduce the cost of storing the graphics and also the transportation.

Lottie worlds with all kinds of Browser which supports new Javascript using Lottie player and it has unlimited quality so and can be optimized further.

How to use Lottie Files in React

Let's create a create-react-app and npm install react-lottie package run the below code.

npm install react-lottie

// or

yarn add react-lottie prop-types

Once done add a component, let's call it Lottie Player. Paste this code into the file


// component/ LottiePlayer.tsx


import { CSSProperties } from "react";
import Lottie from "react-lottie";

interface LottiePlayerProps {
  animationData: any;
  style?: CSSProperties;
}

export default function LottiePlayer(Props: LottiePlayerProps) {
  const { animationData, style } = Props;

  // making a default option

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  };


  return <Lottie options={defaultOptions} style={style} />;
}

Now Add any lottie-files from Lottie Files and add the JSON and the LottiePlayer

// App.tsx

import LottiePlayer from "./components/LottiePlayer";
import "./styles.css";
import * as example1 from "./components/lottieExample.json";

export default function App() {
  return (
    <div className="App">
      <LottiePlayer animationData={example1} />
    </div>
  );
}

Read more about react-lottie npm package React-Lottie Package

Your app will look something like this





Learned Something New? Follow me to be updated about new thing in Web development.

Did you find this article valuable?

Support Ashish maurya by becoming a sponsor. Any amount is appreciated!