# Adding Lottie Files in Your React Application

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.

<iframe title = "Lottie-Example" src="https://embed.lottiefiles.com/animation/15353" width="500px" height="500px" > </iframe>




# 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](https://lottiefiles.com/search?q=blog&category=animations) 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](https://www.npmjs.com/package/react-lottie)


Your app will look something like this 


<iframe src="https://codesandbox.io/embed/react-app-with-lottie-file-k9ptts?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="React App with Lottie File"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>









<br/>
<br/>
<br/>
<br/>


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