useIntersectionObserver

useIntersectionObserver es un Hook de React que detecta si un elemento específico del DOM es visible en la pantalla. Usa la API IntersectionObserver para ejecutar un callback cuando el elemento entra en el área visible o sale de ella.

Interfaz

function useIntersectionObserver<Element extends HTMLElement>(
  callback: (entry: IntersectionObserverEntry) => void,
  options: IntersectionObserverInit
): (element: Element | null) => void;

Parámetros

• callbackrequired · (entry: IntersectionObserverEntry) => void
  

  Un callback que se ejecuta cuando cambia la visibilidad del elemento. Puedes consultar entry.isIntersecting para determinar si el elemento está dentro del área visible.

• optionsrequired · IntersectionObserverInit
  

  Opciones de IntersectionObserver.

  • options.rootElement | Document | null
    

    El elemento que define el área visible para comprobar la visibilidad del elemento objetivo.

  • options.rootMarginstring
    

    Margen alrededor del elemento raíz.

  • options.thresholdnumber | number[]
    

    Un número o un arreglo de números que indican el porcentaje de visibilidad del elemento objetivo en el que debe ejecutarse el callback del observador.

Valor de retorno

• (element: Element | null) => void
  

  Una función para establecer el elemento. Asigna esta función al atributo ref para que el callback se ejecute cada vez que cambie la visibilidad del elemento.

Ejemplo

import { useIntersectionObserver } from 'react-simplikit';

function Component() {
  const ref = useIntersectionObserver<HTMLDivElement>(
    entry => {
      if (entry.isIntersecting) {
        console.log('El elemento está dentro del área visible:', entry.target);
      } else {
        console.log('El elemento está fuera del área visible:', entry.target);
      }
    },
    { threshold: 0.5 }
  );

  return <div ref={ref}>¡Obsérvame!</div>;
}