In this short tutorial, you will be shown how to count numbers up on scroll in React Js. 

Step 1. Create number layout

<MDBCard>
  <MDBCardBody>
      <MDBCardTitle class="pb-3">Our numbers</MDBCardTitle>
      <div className="row">
          <div className="col-3">
              <h4>
                 1000
              </h4>
          </div>
          <div className="col-3">
              <h4>
                  45000
              </h4>
          </div>
          <div className="col-3">
              <h4>
                  300
              </h4>
          </div>
          <div className="col-3">
              <h4>
                 :13.19%
              </h4>
          </div>
      </div>
  </MDBCardBody>
</MDBCard> 

Step 2. Install react-count up package

npm i react-countup

Step 3. Edit the number layout, implement count-up component

<MDBCard>
   <MDBCardBody>
      <MDBCardTitle class="pb-3">Our numbers</MDBCardTitle>
      <div className="row">
          <div className="col-3">
              <h4>
                 <CountUp start={0} end={1000}/>
              </h4>
          </div>
          <div className="col-3">
              <h4>
                  <CountUp start={0} end={45000}/>
              </h4>
          </div>
          <div className="col-3">
              <h4>
                  <CountUp className="countUp" start={0} end={300}/>
              </h4>
          </div>
          <div className="col-3">
              <h4>
                  <CountUp className="countUp" decimals={2} start={0} end={13.19}/>
              </h4>
          </div>
      </div>
  </MDBCardBody>
</MDBCard>

The numbers are places in the CountUp componet's end prop and indicate where it should start counting from in the start prop.

The last number is a decimal, therefore a decimal prop is placed in the CountUp to indicate the number of decimal places they are in the number.

Step 4. Install react-visibility-sensor package

npm i react-visibility-sensor

Step 5. Use react-visibility-sensor compnent to wrap number layout

<VisibilitySensor>
  {({isVisible}) =>
      <MDBCard>
          <MDBCardBody>
              <MDBCardTitle class="pb-3">Our numbers</MDBCardTitle>
              <div className="row">
                  <div className="col-3">
                      <h4>
                          <CountUp start={0} end={1000}/>
                      </h4>
                  </div>
                  <div className="col-3">
                      <h4>
                          <CountUp start={0} end={45000}/>
                      </h4>
                  </div>
                  <div className="col-3">
                      <h4>
                          <CountUp className="countUp" start={0}/>
                      </h4>
                  </div>
                  <div className="col-3">
                      <h4>
                          <CountUp className="countUp" decimals={2} start={0} end={13.19}/>
                      </h4>
                  </div>
              </div>
          </MDBCardBody>
      </MDBCard>
  }
</VisibilitySensor>

Step 6. Set condition on count-up component

<VisibilitySensor>
      {({isVisible}) =>
          <MDBCard>
              <MDBCardBody>
                  <MDBCardTitle class="pb-3">Our numbers</MDBCardTitle>
                  <div className="row">
                      <div className="col-3">
                          <h4>
                              {(isVisible && !this.state.onScroll)?<CountUp start={0} end={1000} onEnd={() => this.setState({onScroll:true})}/>:1000}
                          </h4>
                      </div>
                      <div className="col-3">
                          <h4>
                              {(isVisible && !this.state.onScroll)?<CountUp start={0} end={45000} onEnd={() => this.setState({onScroll:true})}/>:45000}
                          </h4>
                      </div>
                      <div className="col-3">
                          <h4>
                              {(isVisible && !this.state.onScroll)?<CountUp className="countUp" start={0} end={300} onEnd={() => this.setState({onScroll:true})}/>:300}
                          </h4>
                      </div>
                      <div className="col-3">
                          <h4>
                              {(isVisible && !this.state.onScroll)?<CountUp className="countUp" decimals={2} start={0} end={13.19} onEnd={() => this.setState({onScroll:true})}/>:13.19}%
                          </h4>
                      </div>
                  </div>
              </MDBCardBody>
          </MDBCard>
      }
  </VisibilitySensor>

The isVisible param is set as condition along with onScroll state.

The isVisible is true once the numbers are scrolled into view and the onScroll state turns true once the numbers count up once on view.

The onEnd prop in the Countup component changes onScroll state to true once the count finishes. This prevent the numbers counting up evertime you scroll up and down.