Problem with react-countup (enableScrollSpy)

Question

I have the following problem: https://www.npmjs.com/package/react-countup The counter is working in the opposite direction. From bottom to top and not from top to bottom using the enableScrollSpy: boolean (Enables start animation when target is in view.)

Sample .Gif with the problem

My code:

  <CountUp
    className={styles.contadoresLine2}
    end={4000}
    enableScrollSpy="true"
    duration={1}
    separator={"."}
  />

score 1 · Accepted Answer · answered Aug 02 '22 at 18:12

Currently react-countup is having issues with the enableScrollSpy. A simple work around is to install react-visibility-sensor and use like below.

import VisibilitySensor from 'react-visibility-sensor';

  <CountUp end={400}>
    {({ countUpRef, start }) => (
      <VisibilitySensor onChange={start}>
        <span ref={countUpRef} />
      </VisibilitySensor>
    )}
  </CountUp>

https://stackblitz.com/edit/react-hww9fa?file=src%2FApp.js,src%2Fstyle.css,package.json,src%2Findex.js

https://github.com/glennreyes/react-countup/issues/699

React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)

Problem with react-countup (enableScrollSpy)

1 Answers1