ImpressionArea

ImpressionArea es un componente que mide el tiempo durante el que un elemento DOM específico permanece visible en la pantalla y ejecuta callbacks cuando el elemento entra en el área de visualización o sale de ella. Este componente usa el Hook useImpressionRef para seguir la visibilidad del elemento.

Interfaz

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;

Parámetros

• asT
  

  La etiqueta HTML que quieres renderizar. El valor predeterminado es div.

• rootMarginstring
  

  Margen para ajustar el área de detección.

• areaThresholdnumber
  

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

• timeThresholdnumber
  

  Tiempo mínimo durante el que el elemento debe ser visible (en milisegundos).

• onImpressionStart() => void
  

  Función callback que se ejecuta cuando el elemento entra en el área visible.

• onImpressionEnd() => void
  

  Función callback que se ejecuta cuando el elemento sale del área visible.

• refRef<Element<T>>
  

  Referencia al elemento.

• childrenReact.ReactNode
  

  Elementos hijos que quieres renderizar dentro del componente.

• classNamestring
  

  Nombres de clases adicionales para aplicar estilos.

Valor de retorno

• JSX.Element
  

  Un componente de React que sigue la visibilidad de sus elementos hijos.

Ejemplo

function App() {
  return (
    <ImpressionArea
      onImpressionStart={() =>
        console.log('El elemento entró en el área visible')
      }
      onImpressionEnd={() => console.log('El elemento salió del área visible')}
      timeThreshold={1000}
      areaThreshold={0.5}
    >
      <div>¡Sigue mi visibilidad!</div>
    </ImpressionArea>
  );
}