useIntersectionObserver

Hook to use Intersection Observer.

See: Intersection Observer API.

Demo

INFO

The component renders a textarea element with a ref that receives callback returned from useIntersectionObserver hook. There are also two button to disconnect and reconnect observer by functions returned from hook. The textarea element is inside a div, at 400px from top, so it isn't visible. It need to scroll div to see textarea.

Hook is initialized with a callback that verifies if textarea element intersecting window amd set result into state variable. The state variable value is displayed on screen.

Loading demo…

Show source code

import { useState } from "react";
import { useIntersectionObserver } from "../../../.."

export const UseIntersectionObserver = () => {
	const [state, setState] = useState(false);
	const { ref, disconnect, reconnect } = useIntersectionObserver<HTMLTextAreaElement>(
		(entries) => {
			const result = entries[0].isIntersecting;
			result !== state && setState(result);
		},
		{ mode: "ref" }
	);

	return <div>
		<p>{"Is intersected: " + state}</p>
		<div style={{ position: "relative", width: "fit-contenr", height: 200, border: '1px solid lightblue', overflow: 'auto' }}>
			<textarea ref={ref} style={{ position: "absolute", top: 400 }} rows={3}></textarea>
		</div>
		<br/>
		<button onClick={reconnect}>Reconnect</button>
		<button onClick={disconnect}>Disconnect</button>
	</div>
}

Types

UseIntersectionObserverProps

• @template T - The element type observed by the {@link IntersectionObserver}.

Parameters accepted by useIntersectionObserver.

Property	Type	Required	Description
cb	IntersectionObserverCallback	✓	The {@link IntersectionObserverCallback} invoked whenever the observed element's intersection with the viewport (or a configured root) changes. Receives the array of {@link IntersectionObserverEntry} objects and the observer instance itself.
attachOptions	\| { mode: "ref"; targetRef?: never } \| { mode: "effect" \| "layout-effect"; targetRef: RefObject<T> }	✓	Controls how the target element is attached to the observer: - { mode: "ref" } — The hook returns a RefCallback to attach directly to the JSX element. The observer is connected when the ref is set. - { mode: "effect", targetRef } — The observer is connected inside a useEffect using the provided RefObject. - { mode: "layout-effect", targetRef } — The observer is connected inside a useLayoutEffect using the provided RefObject, running synchronously before the browser paints.
opts	IntersectionObserverInit		Options forwarded to the {@link IntersectionObserver} constructor. Controls the root, rootMargin, and threshold used when calculating intersections. When omitted, the observer uses the viewport with default margins and a threshold of 0.

UseIntersectionObserverResult

• @template T - The element type observed by the {@link IntersectionObserver}.

Return value of useIntersectionObserver.

Property	Type	Required	Description
ref	RefCallback<T> \| null	✓	A React ref callback to attach to the target element. Only populated when attachOptions.mode is "ref" — null in "effect" and "layout-effect" modes where the target is provided via targetRef instead.
disconnect	() => void	✓	Disconnects the observer, stopping all intersection notifications. The observer can be restarted by calling {@link UseIntersectionObserverResult.reconnect}.
reconnect	() => void	✓	Reconnects the observer after it has been disconnected, resuming intersection notifications for the target element.