Responsive Number Counting Animation Using React JS

In this article, we will create a responsive number counting animation using ReactJS. The application will show a number of statistics and each number will be animated as it goes up to the point value. Such a format of animation is often applied for interactive data within sites, for example, to demonstrate the number of customers, sales, statistics and so on.

Preview of Final Output:

👁 Image

Prerequisite

• ReactJS
• CSS
• React Hooks
• JavaScript

Approach:

• The CountUpAnimation component accepts props such as an icon, initial value, final value, and text.
• It sets up the useEffect for animations, determining the exact duration required to reach the target value in four seconds.
• Within the useEffect, a counter is created using setInterval, incrementing the count by one at each interval and updating the state with setCount until the target is reached.
• The component displays a container containing an icon, an animated number, and text.
• In the parent component, App, multiple instances of CountUpAnimation are used to showcase diverse statistics.
• Each instance is customized with unique icons, values, and text within a wrapper.

Steps to Create the Project:

Step 1: Create a react application by using this command

npx create-react-app CountUpAnimation

Step 2: After creating your project folder, i.e. CountUpAnimation, use the following command to navigate to it:

cd CountUpAnimation

Project Structure:

👁 Image

The updated dependencies in package.json file will look like:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Below is the implementation of the above approach.

Step 4: Type the following command in the terminal:

npm start

Step 5: Type the following URL in the browser:

 http://localhost:3000/

Output: