Open In App

How to use react-countup module in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

While displaying some count count-up animation enhances the appearance with an increasing count value on the web page. To display count up the animation of numbers we need to use the react-countup module in ReactJS

Prerequisites:

Approach:

Using react-countup module in React JS includes the installation of the corresponding npm package in our React project. We will import the module in the component where we have to display the count-up animation along with attributes like starting, and ending values and the duration of the animation

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the react-countup modules using the following command:

npm i react-countup

Project Structure:

The Updated dependencies after installing required modules.

"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-countup": "^6.5.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example: This example implements a count up to 100000 form 0 using react-countup module with counting duration of 3 seconds.

Javascript




// Filename - App.js
 
import React from "react";
import CountUp from "react-countup";
 
function App() {
    return (
        <div className="App">
            <h1>GEEKSFORGEEKS</h1>
            <div style={{ fontSize: "150px" }}>
                <CountUp
                    start={0}
                    end={100000}
                    duration={3}
                />
            </div>
        </div>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:


Last Updated : 10 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads