How do I call the on() method in react locomotive scroll?

Question

I haven't found in the documentation or on the internet how to call the on() method in the react locomotive scroll. If you know how to do it, please advise.

const ref = useRef(null);

const options = {
  smooth: true,
  lerp: 0.08,
  table: {
    smooth: true
  },
  smartPhone: {
    smooth: true
  },
}

<LocomotiveScrollProvider options={options} containerRef={ref}>
   <div className={demoFour.demo_four} data-scroll-container ref={ref}>
      <div className={demoFour.demo_four__container}>
         <section className={demoFour.home} data-scroll-section=""></section>
       </div>
    </div>
</LocomotiveScrollProvider>

score 0 · Accepted Answer · answered Jan 25 '23 at 08:36

Their documentation (https://www.npmjs.com/package/react-locomotive-scroll) shows that onUpdate will trigger on(). So binding a function to onUpdate handler should do what you are looking for.

const onUpdate = () => {
  //  callback function for on()
}


<LocomotiveScrollProvider 
  options={options} 
  containerRef={ref} 
  onUpdate={onUpdate}
>
   <div className={demoFour.demo_four} data-scroll-container ref={ref}>
      <div className={demoFour.demo_four__container}>
         <section className={demoFour.home} data-scroll-section=""></section>
       </div>
    </div>
</LocomotiveScrollProvider>

How do I call the on() method in react locomotive scroll?

1 Answers1