Осваиваем React хук useIntersectionObserver

Введение

В этом практическом занятии мы узнаем, как использовать хук useIntersectionObserver в React для наблюдения за изменениями видимости заданного элемента. Этот хук можно использовать для отслеживания момента, когда элемент становится видимым на экране, и соответствующим образом запускать определенные действия. В конце этого практического занятия вы сможете реализовать этот хук в своих проектах React для создания более интерактивных и динамических пользовательских интерфейсов.

Хук React useIntersectionObserver

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Для наблюдения за изменениями видимости заданного элемента следуйте шагам:

Используйте хук useState(), чтобы хранить значение пересечения заданного элемента.
Создайте IntersectionObserver с заданными options и соответствующим коллбэком для обновления переменной состояния isIntersecting.
Используйте хук useEffect(), чтобы вызвать IntersectionObserver.observe() при монтировании компонента и очистить с использованием IntersectionObserver.unobserve() при демонтировании.

Вот пример реализации:

const useIntersectionObserver = (ref, options) => {
  const [isIntersecting, setIsIntersecting] = React.useState(false);

  React.useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      observer.unobserve(ref.current);
    };
  }, [ref, options]);

  return isIntersecting;
};

Вы можете использовать хук useIntersectionObserver так:

const MyApp = () => {
  const ref = React.useRef();
  const { threshold: 0.5 });

  return (
    <div>
      <div style={{ height: "100vh" }}>Scroll down</div>
      <div style={{ height: "100vh" }} ref={ref}>
        <p>{onScreen ? "Element is on screen." : "Scroll more!"}</p>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по React хук useIntersectionObserver. Вы можете попрактиковаться в более многих практических занятиях в LabEx, чтобы улучшить свои навыки.