react-countup icon indicating copy to clipboard operation
react-countup copied to clipboard

enableScrollSpy disables onEnd and onStart callback func

Open DevYemi opened this issue 1 year ago • 3 comments

Hi there, thanks for the package.

When ever i enable enableScrollSpy it kinda disables onEnd and onStart callback func, they don't get called.

Is this the normal behavior or this is a bug ?

DevYemi avatar Sep 10 '23 15:09 DevYemi

I'm also having this issue.

ventenni avatar Mar 14 '24 23:03 ventenni

@DevYemi

Hey. I've just played around with my usage and noticed that I had both the scrollSpyDelay and delay properties set. Once I removed delay it started working as expected.

ventenni avatar Mar 15 '24 02:03 ventenni

I'm not observing the behaviour described in this issue, likely due to not having the delay prop set. However, I am experiencing that with enableScrollSpy set the onEnd callback is called before the component enters into the viewport.

Sample code snippet:

<CountUp
    end={142}
    duration={5}
    enableScrollSpy
    scrollSpyDelay={500}
    scrollSpyOnce
    onEnd={() =>
        console.log("end")
    }
/>

Produces the following developer console output: image

Watching the console in real-time you'll see the first message logged before the other two.

EDIT: I did some testing to see if I could use my own scrollspy. What I found is that react-countup, or at least my configuration, seems to reset state after completing. You can easily test this yourselves with this snippet:

const [test, setTest] = useState("test string");

...

<CountUp
    end={142}
    duration={5}
    enableScrollSpy
    scrollSpyDelay={500}
    scrollSpyOnce
    onStart={() => {
        setTest("string test");
    }}
    onEnd={() =>
        console.log(test)
    }
/>

For me the above would log test string only.

kjartanhr avatar Apr 24 '24 15:04 kjartanhr