Adding Lottie Files in Your React Application

Adding Lottie Files in Your React Application

With Create-react-app and Typescript

Ashish maurya
·Sep 8, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • What are Lottie files?
  • Why use Lottie?
  • How to use Lottie Files in React

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.

 
Share this