useImpressionRef

useImpressionRef 是一个测量特定 DOM 元素在屏幕上可见时长、并在元素进入或退出视口时执行回调的 React Hook。它使用 IntersectionObserver 和 Visibility API 来跟踪元素的可见性。

接口

function useImpressionRef<Element extends HTMLElement>(
  options: UseImpressionRefOptions
): (element: Element | null) => void;

参数

• optionsrequired · UseImpressionRefOptions
  

  用于跟踪元素可见性的选项。

  • options.onImpressionStart() => void
    

    元素进入视图时执行的回调函数

  • options.onImpressionEnd() => void
    

    元素退出视图时执行的回调函数

  • options.timeThresholdnumber · 0
    

    元素必须可见的最短时长（毫秒）

  • options.areaThresholdnumber · 0
    

    元素必须可见的最小比例（0 到 1）

  • options.rootMarginstring
    

    用于调整检测区域的边距

返回值

• (element: Element | null) => void
  

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

示例

import { useImpressionRef } from 'react-simplikit';

function Component() {
  const ref = useImpressionRef<HTMLDivElement>({
    onImpressionStart: () => console.log('Element entered view'),
    onImpressionEnd: () => console.log('Element exited view'),
    timeThreshold: 1000,
    areaThreshold: 0.5,
  });

  return <div ref={ref}>Track my visibility!</div>;
}