Usage with Next.js about react-scroll-parallax HOT 5 CLOSED

@jscottsmith
Hey,
sure, you're welcome to try it here - https://github.com/vaclav-zeman/next-parallax-example/tree/master (just a super ugly simple demo). It uses the newest version.

The "routes" are wrapped in the ParallaxProvider but when you go from one page to the other, the other parallax doesn't work.

from react-scroll-parallax.

@vaclav-zeman Thanks for that reproducible demo. It does looks like a bug -- I'm going to look into it more thoroughly and try and publish a fix.

from react-scroll-parallax.

Temporarily solved by downgrading to v1.0.2 that stores global ParallaxController in window object.

Could there be an option to still use the window object in new versions or are there some major drawbacks?

from react-scroll-parallax.

Thanks for reporting this. I'd like to look into it more and see if it's a bug and provide a proper fix. Can you provide your repo for me?

In case you can't here's some possible reasons you're having trouble...

I did address an issue with the ParallaxProvider not re-instantiating the controller during route changes like you linked in #9 and published a fix in v1.1.1. Were you using this version or above, prior to the downgrade?

in Next.js you cannot change or wrap the top-level component

Just to be clear, since you can't wrap the top-level component you'll need to wrap each route that has parallax in the <ParallaxProvider> like so.

const HomeRoute = () => (
    <ParallaxProvider>
        <Home />
    </ParallaxProvider>
);

const AboutRoute = () => (
    <ParallaxProvider>
        <About />
    </ParallaxProvider>
);

If you did do this then it's likely a bug -- send that repo so I can do some testing and hopefully publish a fix.

from react-scroll-parallax.

Published patch in 1.2.1.

from react-scroll-parallax.