Usage with Next.js

[vaclav-zeman]

Hi, this issue is related to #9

I've got a Next.js app and currently use react-scroll-parallax on 2 separate pages (great library btw!). When you come to the page 1, the parallax works fine. But when you change route from here to the page 2, the parallaxes don't work (probably don't initialize).

The cause of the problem could be that in Next.js you cannot change or wrap the top-level component in your custom component (in this case ParallaxProvider). Basically the most "root" component (such as Layout) I can wrap is being unmounted on every route change.

Is there any workaround for this?

[vaclav-zeman]

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?

[jscottsmith]

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.

[vaclav-zeman]

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

[jscottsmith]

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

[jscottsmith]

Published patch in 1.2.1.