useIntersect

Hook that fires a callback when a DOM node enters the viewport, using the Intersection Observer API (opens in a new tab).

When the API is unavailable (legacy environments), the callback is called once as a graceful fallback (visibility is assumed).

When to use

✅ Use when…	🚫 Avoid when…
For infinite scroll: trigger loading when nearing the end of the list. For lazy-loading images/components outside the screen. For view tracking (analytics) of sections.	To detect element resizing (use `ResizeObserver`). To measure exact position in real time during scroll (use `getBoundingClientRect`).

Signature

const [setNode] = useIntersect(
  options: IntersectionObserverInit,
  onIntersect?: () => void,
);

Example

import { useIntersect } from '@apollion-dsi/core/hooks';
 
function LoadMoreSentinel({ onVisible }: { onVisible: () => void }) {
  const [setNode] = useIntersect({ threshold: 1 }, onVisible);
 
  return <div ref={setNode}>Load more…</div>;
}

useIntersect

When to use

Signature

Example

See also