React locomotive scroll метод on()

Question

Как в react-locomotive-scroll вызвать метод on()?

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>

Answer 1

Сначала нужно импортировать useScroll из библиотеки

import { useScroll } from 'react-locomotive-scroll'

Получив можете получить ссылку на объект scrollController, а затем вызвать метод on() для этого объекта.


const ExampleComponent = () => {
  const { scrollController } = useScroll()

  useEffect(() => {
    scrollController.on('call', () => {
      // Do something when the call event is fired
    })
  }, [scrollController])

  return (...)
}

Можно еще использовать состояние и useState для установки состояния при запуске события и использовать это состояние в своем компоненте.


const ExampleComponent = () => {
  const { scrollController } = useScroll()
  const [eventFired, setEventFired] = useState(false);

  useEffect(() => {
    scrollController.on('call', () => {
      setEventFired(true);
    })
  }, [scrollController])

  return (
    <div>
      {eventFired ? <p>Event fired!</p> : null}
    </div>
  )
}

БЛОГ НА HUSL

React locomotive scroll метод on()

Ответы (1 шт):