useImpressionRef

useImpressionRef es un Hook de React que mide el tiempo durante el cual un elemento específico del DOM está visible en pantalla y ejecuta callbacks cuando el elemento entra en el área visible o sale de ella. Usa IntersectionObserver y la Visibility API para hacer un seguimiento de la visibilidad del elemento.

Interfaz

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

Parámetros

• optionsrequired · UseImpressionRefOptions
  

  Opciones para hacer un seguimiento de la visibilidad del elemento.

  • options.onImpressionStart() => void
    

    Callback que se ejecuta cuando el elemento entra en el área visible

  • options.onImpressionEnd() => void
    

    Callback que se ejecuta cuando el elemento sale del área visible

  • options.timeThresholdnumber · 0
    

    Tiempo mínimo durante el cual el elemento debe estar visible (en milisegundos)

  • options.areaThresholdnumber · 0
    

    Proporción mínima del elemento que debe estar visible (de 0 a 1)

  • options.rootMarginrequired · string
    

    Margen para ajustar el área de detección

Valor de retorno

• (element: Element | null) => void
  

  Una función para establecer el elemento. Asigna esta función al atributo ref y los callbacks se ejecutarán cada vez que cambie la visibilidad del elemento.

Ejemplo

import { useImpressionRef } from 'react-simplikit';

function Component() {
  const ref = useImpressionRef<HTMLDivElement>({
    onImpressionStart: () =>
      console.log('El elemento entró en el área visible'),
    onImpressionEnd: () => console.log('El elemento salió del área visible'),
    timeThreshold: 1000,
    areaThreshold: 0.5,
  });

  return <div ref={ref}>¡Haz un seguimiento de mi visibilidad!</div>;
}