ImpressionArea

ImpressionArea 是一个测量特定 DOM 元素在屏幕上可见时长、并在元素进入或离开视口时执行回调的组件。该组件使用 useImpressionRef Hook 来跟踪元素的可见性。

接口

function ImpressionArea<T extends ElementType>(
  as: T = 'div',
  rootMargin?: string,
  areaThreshold?: number,
  timeThreshold?: number,
  onImpressionStart?: () => void,
  onImpressionEnd?: () => void,
  ref?: Ref<Element<T>>,
  children?: React.ReactNode,
  className?: string
): JSX.Element;

参数

• asT
  

  要渲染的 HTML 标签。默认值为 div。

• rootMarginstring
  

  用于调整检测区域的边距。

• areaThresholdnumber
  

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

• timeThresholdnumber
  

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

• onImpressionStart() => void
  

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

• onImpressionEnd() => void
  

  元素离开视野时执行的回调函数。

• refRef<Element<T>>
  

  对元素的引用。

• childrenReact.ReactNode
  

  渲染在组件内部的子元素。

• classNamestring
  

  用于附加样式的 class 名。

返回值

• JSX.Element
  

  一个跟踪其子元素可见性的 React 组件。

示例

function App() {
  return (
    <ImpressionArea
      onImpressionStart={() => console.log('Element entered view')}
      onImpressionEnd={() => console.log('Element exited view')}
      timeThreshold={1000}
      areaThreshold={0.5}
    >
      <div>Track me!</div>
    </ImpressionArea>
  );
}