Overview

react-intersection-observer turns the native browser API into a small React primitive for state, effects, and component composition.

Try the live demo ↓

Start with one hook

npm install react-intersection-observer

pnpm add react-intersection-observer

yarn add react-intersection-observer

bun add react-intersection-observer

import { useInView } from "react-intersection-observer";

export function Section() {
  const { ref, inView } = useInView();

  return <section ref={ref}>{inView ? "In view" : "Waiting"}</section>;
}

Attach ref to an element and use inView in the render. By default, the browser viewport is the root and any intersection changes the state. Configure a threshold, margin, or custom root when that default is not enough.

When you need geometry, entry is the latest observer result; it is undefined until the browser accepts a notification.

See it work

Change the threshold, then scroll the small viewport. This is the same useInView contract as the example above: a ref goes on the target, and visibility becomes React state.

Live observer signal

Reveal a rich card as it enters the feed

1. Choose a trigger point. 2. Scroll the feed.

Step 2 · Scroll this feed to reveal the card ↓

Design systems that travelA small feed item

A quiet note on shippingA small feed item

Small details, deliberately timedA small feed item

A scroll worth observingA small feed item

QueuedWatching

Feature card is waiting

Scroll until enough of this card is visible.

Waiting for visibility

Where interaction beginsA small feed item

Choose the shape that fits

Observe UI state

Use useInView when visibility changes what the component renders.

Run a side effect

Use useOnInView for impressions, prefetching, and analytics without a hook-owned re-render.

Use a component

Use <InView> when a render prop or wrapper is the clearest composition.

Common next steps

Tune when it triggers

Set a threshold, preload with rootMargin, or account for nested scrollers.

Build a common pattern

Lazy-load images, reveal content, track impressions, or paginate a list.

Test the behavior

Use Browser Mode for real browser behavior and mocks for deterministic transitions.

Handle SSR and fallbacks

Choose initial and unsupported-client behavior deliberately.