Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enableScrollSpy disables onEnd and onStart callback func #817

Open
DevYemi opened this issue Sep 10, 2023 · 3 comments
Open

enableScrollSpy disables onEnd and onStart callback func #817

DevYemi opened this issue Sep 10, 2023 · 3 comments

Comments

@DevYemi
Copy link

DevYemi commented Sep 10, 2023

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 ?

@ventenni
Copy link

I'm also having this issue.

@ventenni
Copy link

ventenni commented Mar 15, 2024

@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.

@kjartanhr
Copy link

kjartanhr commented Apr 24, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants