ImpressionArea

ImpressionArea は、特定の DOM 要素が画面に表示されている時間を計測し、 要素がビューポートに入ったときや出たときにコールバックを実行するコンポーネントです。 useImpressionRef フックを使用して、要素の表示状態を追跡します。

インターフェース

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
  

  スタイルを適用するための追加のクラス名。

戻り値

• JSX.Element
  

  子要素の表示状態を追跡する React コンポーネント。

使用例

function App() {
  return (
    <ImpressionArea
      onImpressionStart={() => console.log('要素が表示領域に入りました')}
      onImpressionEnd={() => console.log('要素が表示領域から出ました')}
      timeThreshold={1000}
      areaThreshold={0.5}
    >
      <div>この要素を追跡してください！</div>
    </ImpressionArea>
  );
}