How to use Count-up in ReactJs.

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

 

     

 

        <CountUp

          start={5}

          end={55020}

          duration={5}

        />    

     

   

  );

}

  

export default App;

 

Now start you NPM run this comand

 

  npm start

 

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