Usage with React

[der-lukas]

Is there a way of using this library with React? How would I initialize and target components?
Would be awesome if you could supply a minimal setup example!

Thank you!

[vsanta]

Also interested in an example

[nathobson]

I guess something like this: https://codesandbox.io/embed/locomotive-scroll-in-react-k0028.

It's throwing some console errors though but I just put this together really quickly. I've just attached a ref to the container and the I fire the script via the useEffect hook so it fires when the component is mounted.

[jaexplorer]

@nathobson this doesn't work. Its not smooth.

[adamcoulombe]

I use a similar approach as @nathobson to get the element with aref, but I use class components and initiate locomotiveScroll in componentDidMount.

https://codesandbox.io/s/proud-resonance-ou1rz

The main thing to just be aware of when using it with react is if you unmount the component that has rendered the DOM el used by locomotiveScroll, you'll need to destroy your locomotive scroll instance (i think in componentWillUnmount), otherwise you will probably get a bunch of errors.

[cytronn]

Hey,
I'm trying to use the module using next.js, and I'm having trouble importing locomotiveScroll.
I'm getting an error similar to the issue people had for nuxt.js, document is not defined, but somehow I couldn't find a way to make it work.

[millette]

@cytronn You'll probably need to dynamically import the module so it's not processed server-side (no document there).

[aaadamgo]

@adamcoulombe how do you destroy it on componentWillUnmount?

[adamcoulombe]

@aaadamgo i guess use the destroy method

componentWillUnmount(){
myScroller.destroy()
}

[aaadamgo]

@aaadamgo i guess use the destroy method

componentWillUnmount(){
myScroller.destroy()
}

Thanks Adam, i tried that, or similar anyway. And when it changes page, if i go back to the page where I'm using it, something weird happens where it's likes there's 2 versions of the scrollbar.

see here:

export default class IndexPage extends React.Component {
    constructor(props) {
        super(props);
        const lsRef = null;
    }

    render() {
        return (
            <Animation transitionStatus={this.props.transitionStatus}>
                <div className="ls">
                    ---
                    <Projects />
                </div>
            </Animation>
        );
    }

    componentDidMount() {
        this.lsRef = new LocomotiveScroll({
            el: document.querySelector(".ls"),
            smooth: true,
        });
        window.addEventListener("resize", () => {});
    }

    componentWillUnmount() {
        this.lsRef.destroy();
    }
}

[adamcoulombe]

It’s possible that the destroy method only cleans up the events.

Take a look at the source:

locomotive-scroll/src/scripts/Core.js

Line 211 in 4240f83

destroy() {

Because of this you may also need to manually remove elements that were added like the scrollbar, using some vanilla JS to clean up DOM that locomotive is leaving behind.

Seems like locomotive should be doing this when you destroy- may be worth a separate issue/feature request- unless I’m missing something?

[fukou]

Hello. I am using Next.js and just did what @millette said to dynamically import the module. The error is gone (document is not defined) but still doesn't work. Did I miss something? Here's my code:

import React from "react";
import dynamic from "next/dynamic";

const LocomotiveScroll = dynamic(() => import("locomotive-scroll"), {
  ssr: false
});

class Index extends React.Component {
   componentDidMount() {
    const scroll = new LocomotiveScroll({
      el: document.querySelector(".app"),
      smooth: true
    });
    console.log(scroll);
  }

 render() {
    return (
      <>
        <div className="app">
        ....
        </div>
     </>
     );
  }
}

export default Index;

Thanks in advance!

[adamjw3]

Has anyone managed to get this to destroy completely.

@adamcoulombe i think i'm experiencing what you stated, when i leave the page with the locomotive-scroll on i'm calling destroy in a react hook but its not removing everything, which is fine on the page i go to but sometimes if i go back to a page with locomotive on it fucks up.

here is an example https://pup.adamwright90.now.sh/