useIntersectionObserver Hook

React hook that tracks when an element enters or leaves the viewport. Perfect for lazy loading, infinite scroll, or triggering animations.

TypeScript7/16/2025

#react#hooks#intersection-observer

TypeScript

import { useEffect, useRef, useState } from 'react';

export function useIntersectionObserver(options = {}) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => setIsIntersecting(entry.isIntersecting),
      { threshold: 0.1, ...options }
    );

    if (ref.current) observer.observe(ref.current);
    
    return () => observer.disconnect();
  }, [options]);

  return { ref, isIntersecting };
}

...

Loading comments...