Locomotive Scroll with React 17

Question

I'm trying to use Locomotive Scroll with React 17. I don't know how to setup the component correctly for it to work. All examples I find are for older versions of React, that I don't understand.

Does anyone know how to get this to work?

I'm thinking it should look something like this:

import React from "react"
import LocomotiveScroll from "locomotive-scroll"


const ComponentName = () => {

 //some code here

  return (
      <div data-scroll-container>
        <section data-scroll-section>
          <h1 data-scroll>Hey, there!</h1>
          <p
            role="img"
            aria-label=""
            data-scroll
            data-scroll-direction="horizontal"
            data-scroll-speed="3"
          >
            
          </p>
        </section>
        <section data-scroll-section>
          <h2 data-scroll data-scroll-speed="1">
            What's up?
          </h2>
          <p data-scroll role="img" aria-label="">
            
          </p>
        </section>
      </div>
    );
  }

export default ComponentName

score 2 · Answer 1 · answered Jun 02 '21 at 20:34

You should use it in a useEffect as in the example below. You can try to use it by getting the class directly or with useRef. Try looking at the example below.

    import LocomotiveScroll from 'locomotive-scroll';
    import { useEffect, useRef } from 'react';
    
    export default function Home() {
    
       let container = useRef(null);
    
       useEffect(() => {
          
          new LocomotiveScroll({
             el: container,
             smooth: true,
             lerp: .06,
             multiplier: .5
          });
    
       }, []);
    
       return (               
          <div ref={el => container = el} className="container">
             <div data-scroll data-scroll-speed="1">
               //Code here
             </div>
          </div>
       )
    }

score 1 · Answer 2 · answered Jul 24 '22 at 12:12

Make a custom hook for locomotive scroll;

import { useEffect } from "react";

export default function useLocoScroll() {
    useEffect(() => {
        let scroll:any;
        // @ts-ignore
        import("locomotive-scroll").then((locomotiveModule) => {
            scroll = new locomotiveModule.default({
                el: document.querySelector("[data-scroll-container]"),
                smooth: true,
                smoothMobile: true,
                resetNativeScroll: true,
                lerp: 0.12
            });
        });
        return () => {
            if (scroll) {
                scroll.destroy();
            }
        }
    },[]);
}

Then use this hook in all pages;

import useLocoScroll from "../components/useLocoScroll";

const Blog: NextPage = () => {
  useLocoScroll();
  return (
    <>
    Body
    </>
  )
}

export default Blog

If this is not followed you might end up with multiple scrollbars or other issues.

Locomotive Scroll with React 17

2 Answers2