useIntersectionObserver

A powerful React hook to track the visibility of elements in the viewport. Perfect for scroll reveals and lazy loading.

Overview

useIntersectionObserver provides a clean way to use the native IntersectionObserver API. It tracks when a target element intersects with an ancestor element or the top-level document's viewport. This is the foundation for creating premium "Reveal on Scroll" animations and optimizing performance through lazy loading.

Demo

Creative Showcase

Elegant Reveal
On Scroll

Scroll down to see the Intersection Observer in action. Elements animate in gracefully as they enter your view.

API Reference

function useIntersectionObserver(
  elementRef: RefObject<Element | null>,
  options?: UseIntersectionObserverArgs
): IntersectionObserverEntry | undefined

Parameters

NameTypeDescription
elementRefRefObject<Element | null>React ref pointing to the element to observe
thresholdnumber | number[]A number or array of numbers indicating what percentage of visibility should trigger the callback
freezeOnceVisiblebooleanIf true, the observer will disconnect after the element first becomes visible (default: false)

Returns

TypeDescription
IntersectionObserverEntry | undefinedThe current intersection entry containing visibility data

Usage Examples

Simple Reveal

import { useRef } from 'react'
import { useIntersectionObserver } from 'react-hooks-ts'
 
function RevealCard() {
  const ref = useRef(null)
  const entry = useIntersectionObserver(ref, { 
    threshold: 0.1, 
    freezeOnceVisible: true 
  })
  const isVisible = !!entry?.isIntersecting
 
  return (
    <div 
      ref={ref} 
      style={{ 
        opacity: isVisible ? 1 : 0, 
        transition: 'opacity 1s ease-in' 
      }}
    >
      I fade in when you scroll to me!
    </div>
  )
}

Features

  • ✅ Elegant API - Simplified interface for a complex native browser feature
  • ⚡ Optimized Performance - Respects freezeOnceVisible to save browser resources
  • 🧩 TypeScript - Fully typed for any HTML element
  • 🛡️ SSR Safe - Gracefully handles server environments
  • 📱 Clean Integration - Works seamlessly with any CSS animation library or standard transitions