ImpressionArea

ImpressionArea is a component that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport. This component uses the useImpressionRef hook to track the element's visibility.

Interface

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

Parameters

• asElementType
  

  The HTML tag to render. Defaults to div.

• rootMarginstring
  

  Margin to adjust the detection area.

• areaThresholdnumber
  

  Minimum ratio of the element that must be visible (0 to 1).

• timeThresholdnumber
  

  Minimum time the element must be visible (in milliseconds).

• onImpressionStart() => void
  

  Callback function executed when the element enters the view.

• onImpressionEnd() => void
  

  Callback function executed when the element exits the view.

• refRef<HTMLElement>
  

  Reference to the element.

• childrenReact.ReactNode
  

  Child elements to be rendered inside the component.

• classNamestring
  

  Additional class names for styling.

Return Value

• JSX.Element
  

  React component that tracks the visibility of its child elements.

Example

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>
  );
}