如何在React中實現自定義Hook來監控元素的可見性

在React中實現自定義Hook來監控元素的可見性，可以使用IntersectionObserver API。IntersectionObserver是瀏覽器提供的API，用于監控元素是否進入或離開視口。

以下是一個示例實現可以用來監測元素的可見性的自定義Hook：

import { useEffect, useState } from 'react';

const useVisibility = (ref) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.5 }
    );

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

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

  return isVisible;
};

export default useVisibility;

在使用自定義Hook時，需要將元素的Ref傳遞給useVisibility，并獲取返回的isVisible來判斷元素是否可見。示例如下：

import React, { useRef } from 'react';
import useVisibility from './useVisibility';

const App = () => {
  const elementRef = useRef();
  const isVisible = useVisibility(elementRef);

  return (
    <div ref={elementRef}>
      {isVisible ? 'Element is visible' : 'Element is not visible'}
    </div>
  );
};

export default App;

通過使用IntersectionObserver API，可以輕松地實現監測元素可見性的自定義Hook，并根據元素的可見性狀態進行相應的操作。