Search for a command to run...
With Create-react-app and Typescript
I am a developer from India with a good eye for frontend logic and design. I am also well acquainted with the backend and business logic so that's add to my ability to create a good frontend while making it easily integratable with backend.
No comments yet. Be the first to comment.
Understanding and Reading the MNIST Dataset
In the digital age, where data breaches are as common as coffee spills, one cryptographic algorithm stands out for its robustness in securing our passwords: bcrypt. Let's dive into the world of bcrypt hashing, uncovering its mechanics, the role of sa...
In our daily used language, we use Grammar, similarly, in computer language, we have a set of rules called grammar on which a language is defined. In this article, we will look into what those Grammars are and how we define and use them. Exploring th...
Introduction In the vast landscape of computer science, languages are not just confined to human communication; they also extend into the realm of formal languages, classified into regular and non-regular categories. Understanding these languages is ...
Hello Guys, welcome back to my blog. Today we will be creating our small server and React app to learn about Server-Sent Events and how to handle them in a React App. But before we even start building anything let's learn about Server-Side Events (SS...
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.
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.
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.
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