Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Making a timer in React JS using reactspring animation
In this article, we will see how to create a timer in React using react-spring animation. Spring animation is a new type of method which is used to add animation in a different way. It is a more precise and modern way to add animation in React.js. Using react-spring, we can create effects like fade-in, fade-out, bounce, etc.
First create a React project −
npx create-react-app firstproject
Now go to the project directory −
cd firstproject
Example
Install the react-spring package −
npm install react-spring
react-spring is used to add spring concept based animations to our website. We can use this library to add different type of animations.
Let us now proceed to create the timer in React.JS.
Add the following lines of code in App.js −
import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
function Number() {
const [flip, set] = useState(false);
const { number } = useSpring({
reset: true,
reverse: flip,
from: { number: 0 },
number: 5,
delay: 100,
onRest: () => set(!flip),
});
return <animated.div>{number.to((n) => n.toFixed(2))}</animated.div>;
}
export default function App() {
return (
<div style={{ marginLeft: 500, marginTop: 200 }}>
<Number />
</div>
);
}Explanation
We create a spring object, which will count from 0 to 5.
Then we added some extra attributes like −
reset to start the loop; it is set to true,
reverse to indicate when the counting should start or end,
delay to delay the animation, and
onRest to indicate what to do when the counting stops.
n.toFixed(2) indicates how many digits to show after the decimal.
Output
On execution, it will produce the following output −
468 Views
