useIntersectionObserver

useIntersectionObserver 是一个检测特定 DOM 元素是否在屏幕上可见的 React Hook。它使用 IntersectionObserver API，在元素进入或退出视口时执行回调。

接口

function useIntersectionObserver<Element extends HTMLElement>(
  callback: (entry: IntersectionObserverEntry) => void,
  options: IntersectionObserverInit
): (element: Element | null) => void;

参数

• callbackrequired · (entry: IntersectionObserverEntry) => void
  

  元素可见性发生变化时执行的回调函数。你可以检查 entry.isIntersecting 来判断元素是否在视图中。

• optionsrequired · IntersectionObserverInit
  

  用于 IntersectionObserver 的选项。

  • options.rootElement | Document | null
    

    用作检查目标可见性视口的元素。

  • options.rootMarginstring
    

    根元素周围的边距。

  • options.thresholdnumber | number[]
    

    可以是单个数字或数字数组，表示在目标可见性达到百分之多少时，observer 的回调应被执行。

返回值

• (element: Element | null) => void
  

  一个用于设置元素的函数。将其附加到 ref 属性上，每当元素的可见性发生变化时，callback 就会被执行。

示例

import { useIntersectionObserver } from 'react-simplikit';

function Component() {
  const ref = useIntersectionObserver<HTMLDivElement>(
    entry => {
      if (entry.isIntersecting) {
        console.log('Element is in view:', entry.target);
      } else {
        console.log('Element is out of view:', entry.target);
      }
    },
    { threshold: 0.5 }
  );

  return <div ref={ref}>Observe me!</div>;
}