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