search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

Can't disable effect after initialization #151

Closed mattoni closed 2 years ago

mattoni commented 2 years ago

Hi there!

I'm unable to disable the effect after it's been initialized. The use case is that I am using SSR, but need to disable the effect on mobile due to performance. If I try to change the disabled property on the effect after the client is rehydrated, nothing happens and the effect still occurs. My expectation would be that it would be switched off. If this is not the proper way to do that, how would I go about properly disabling the effect?

Thanks!

jscottsmith commented 2 years ago

Ya sounds like a bug but I'll need an example to know for sure.

Some questions to help me reproduce this:

Are you using the useParallax hook? Or are we talking about the ParallaxBanner component? Can you share the relevant code blocks please?

Are you using Next JS/Gatsby SSR?

mattoni commented 2 years ago

It fails with both the <Parallax /> component and the useParallax hook. Basically, I'm doing this:

    const px = useParallax<HTMLDivElement>({
        speed: 50,
        disabled: scrollDisabled,
    });

and I set scrollDisabled to true on the client, in a useEffect, once the screen width has been determined.

I'm using Remix, but I imagine it'd be the same for NextJS/Gatsby.

jscottsmith commented 2 years ago

Great, thanks, I'll look into it!

jscottsmith commented 2 years ago

@mattoni please try updating to version v3.0.6 and let me know if the issue is resolved. Thanks!

mattoni commented 2 years ago

Perfect, this worked. Thanks so much @jscottsmith !