Overview

A React implementation of the Intersection Observer API that tells you when an element enters or leaves the viewport. Use hooks for React state or effects, or <InView> for render props and plain children.

Try the live demo ↓

Start simple

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 only 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

The basic hook above uses the browser viewport. This demo adds a custom scroll root and a threshold so you can see how options change the same inView state.

See when an element becomes visible

Step 2 · Scroll this panel to reveal the observed 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 an API

When you need to	Use	Why
Change what a component renders	`useInView`	Returns a `ref`, `inView`, and the latest `entry`.
Run an impression, prefetch, or analytics callback	`useOnInView`	Calls your callback without a hook-owned state update.
Keep observation close to render props or a wrapper	`<InView>`	Provides render props and supports plain children.

Built for production React

Native and efficient. Familiar browser options and shared observer instances keep many observed elements inexpensive.
Typed and composable. Hooks, components, options, and observer entries are typed without another package.
Testable at the right layer. Use deterministic utilities for transitions and Browser Mode for real browser behavior.
Focused exports. Tree shaking keeps the client footprint limited to the APIs you import.

Common next steps

Core APIs — learn the full contracts and return values.
Observer options — tune thresholds, margins, and scroll containers.
Recipes — build lazy loading, reveals, impressions, and infinite lists.

For verification, see Testing; for server-rendered apps, see SSR and fallbacks.