Home Tutorial How to use Count-up in ReactJs.

How to use Count-up in ReactJs.

by MH RISHAD - 23 Jul 2022

Sometimes we want Number counup for our site, that number increasing manner from zero to target value. In this cases react-countup meet this needs and comes into action. This is an npm package and we need to install for usingin this countup functionality. 

*** {FolderName} mean you folder name. Choose any folder name replace this {FolderName}

First we need to creating react APP and Install. Open comand Prompt (CMD) from windows 

1: Create a React application using the following commands:


    npx create-react-app {FolderName}


Step 2: After creating your project folder {FolderName}, navigate to it using the following command:


    cd {FolderName}


Step 3: now install the react-countup package 


    npm install react-countup


How to use

Example: Now write the following code in the App.js file. Here, app is our default component where we wrote our code.


import React from 'react';

import CountUp from 'react-countup';


function App() {

  return (





Count Up















export default App;


Now start you NPM run this comand


  npm start


Output: Now open your browser and go to http://localhost:3000



Leave a Comment

Required fields are marked *