useIntersectionObserver — Observe when elements enter or exit the viewport

import { useState, useEffect, useRef, useCallback } from "react";
 
interface UseIntersectionObserverOptions {
  /** Element that is used as the viewport. Default: browser viewport */
  root?: Element | null;
  /** Margin around the root. Default: "0px" */
  rootMargin?: string;
  /** Percentage of element visible to trigger. 0-1 or array. Default: 0 */
  threshold?: number | number[];
  /** Only trigger once (e.g., for lazy loading). Default: false */
  triggerOnce?: boolean;
  /** Start observing immediately. Default: true */
  enabled?: boolean;
}
 
interface UseIntersectionObserverReturn {
  /** Ref to attach to the target element */
  ref: (node: Element | null) => void;
  /** The latest IntersectionObserverEntry */
  entry: IntersectionObserverEntry | null;
  /** Whether the element is currently intersecting */
  isIntersecting: boolean;
}
 
function useIntersectionObserver(
  options: UseIntersectionObserverOptions = {}
): UseIntersectionObserverReturn {
  const {
    root = null,
    rootMargin = "0px",
    threshold = 0,
    triggerOnce = false,
    enabled = true,
  } = options;
 
  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
  const observerRef = useRef<IntersectionObserver | null>(null);
  const nodeRef = useRef<Element | null>(null);
  const frozenRef = useRef(false);
 
  const cleanup = useCallback(() => {
    if (observerRef.current) {
      observerRef.current.disconnect();
      observerRef.current = null;
    }
  }, []);
 
  // Callback ref pattern for flexible element targeting
  const ref = useCallback(
    (node: Element | null) => {
      // Cleanup previous observer
      cleanup();
      nodeRef.current = node;
 
      if (!node || !enabled || frozenRef.current) return;
 
      if (typeof IntersectionObserver === "undefined") return;
 
      observerRef.current = new IntersectionObserver(
        ([observedEntry]) => {
          setEntry(observedEntry);
 
          if (triggerOnce && observedEntry.isIntersecting) {
            frozenRef.current = true;
            cleanup();
          }
        },
        { root, rootMargin, threshold }
      );
 
      observerRef.current.observe(node);
    },
    [root, rootMargin, threshold, triggerOnce, enabled, cleanup]
  );
 
  // Cleanup on unmount
  useEffect(() => {
    return cleanup;
  }, [cleanup]);
 
  return {
    ref,
    entry,
    isIntersecting: entry?.isIntersecting ?? false,
  };
}

"use client";
 
// Lazy-loaded image
function LazyImage({ src, alt }: { src: string; alt: string }) {
  const { ref, isIntersecting } = useIntersectionObserver({
    triggerOnce: true,
    rootMargin: "200px", // Start loading 200px before visible
  });
 
  return (
    <div ref={ref} style={{ minHeight: 200, background: "#f0f0f0" }}>
      {isIntersecting ? (
        <img src={src} alt={alt} style={{ width: "100%" }} />
      ) : (
        <div style={{ padding: 20, color: "#999" }}>Loading...</div>
      )}
    </div>
  );
}
 
// Infinite scroll trigger
function InfiniteList() {
  const [items, setItems] = useState<number[]>([1, 2, 3, 4, 5]);
  const [loading, setLoading] = useState(false);
 
  const { ref, isIntersecting } = useIntersectionObserver({
    threshold: 1.0,
  });
 
  useEffect(() => {
    if (!isIntersecting || loading) return;
    setLoading(true);
 
    // Simulate API call
    setTimeout(() => {
      setItems((prev) => [
        ...prev,
        ...Array.from({ length: 5 }, (_, i) => prev.length + i + 1),
      ]);
      setLoading(false);
    }, 500);
  }, [isIntersecting, loading]);
 
  return (
    <div>
      {items.map((item) => (
        <div key={item} style={{ padding: 24, borderBottom: "1px solid #eee" }}>
          Item {item}
        </div>
      ))}
      <div ref={ref} style={{ padding: 20, textAlign: "center" }}>
        {loading ? "Loading more..." : "Scroll for more"}
      </div>
    </div>
  );
}
 
// Animate on scroll
function AnimatedSection({ children }: { children: React.ReactNode }) {
  const { ref, isIntersecting } = useIntersectionObserver({
    threshold: 0.2,
    triggerOnce: true,
  });
 
  return (
    <div
      ref={ref}
      style={{
        opacity: isIntersecting ? 1 : 0,
        transform: isIntersecting ? "translateY(0)" : "translateY(20px)",
        transition: "opacity 0.6s ease, transform 0.6s ease",
      }}
    >
      {children}
    </div>
  );
}

function useIntersectionObserverMultiple(
  options: IntersectionObserverInit = {}
) {
  const [entries, setEntries] = useState<Map<Element, IntersectionObserverEntry>>(new Map());
  const observer = useRef<IntersectionObserver | null>(null);
 
  const observe = useCallback((node: Element) => {
    if (!observer.current) {
      observer.current = new IntersectionObserver((observed) => {
        setEntries((prev) => {
          const next = new Map(prev);
          observed.forEach((e) => next.set(e.target, e));
          return next;
        });
      }, options);
    }
    observer.current.observe(node);
  }, [options]);
 
  return { observe, entries };
}

const { entry } = useIntersectionObserver({
  threshold: Array.from({ length: 101 }, (_, i) => i / 100),
});
const ratio = entry?.intersectionRatio ?? 0; // 0.0 to 1.0