useIntersectionObserver

NewSSR SAFE

Triggers when an element enters or leaves the viewport.

$ pnpm dlx shadcn@latest add @byphongphan/use-intersection-observer

Requires @byphongphan in components.json

performance

use-intersection-observer.tsx

Visibility observerOut of viewport

Observed element

Scroll to bring this element into view

Intersection ratio0%

Threshold0.5

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-intersection-observer

Requires @byphongphan in components.json

Usage

import { useIntersectionObserver } from "@/shared/hooks"
export function LazyCard() {  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({    threshold: 0.5,    freezeOnceVisible: true,  })
  return (    <div      ref={ref}      className={isIntersecting ? "animate-fade-in" : "opacity-0"}    >      <h3>Animated Element</h3>      <p>Appears once 50% enters viewport.</p>    </div>  )}

Props & Parameters

Param	Type	Default	Description
`threshold`	`number \| number[]`	`0`	Either a single number or an array of numbers between 0.0 and 1.0 indicating visibility ratio.
`root`	`Element \| Document \| null`	`null`	The element that is used as the viewport for checking visibility. Defaults to browser viewport.
`rootMargin`	`string`	`"0%"`	Margin around the root element, similar to CSS margin property.
`freezeOnceVisible`	`boolean`	`false`	When `true`, automatically unobserves element after it first enters viewport.
`enabled`	`boolean`	`true`	Whether intersection observer is active.

Returns

Return	Type	Description
`ref`	`RefObject<T \| null>`	React Ref to attach to target DOM element container.
`isIntersecting`	`boolean`	`true` when target is currently intersecting viewport based on threshold.
`entry`	`IntersectionObserverEntry \| null`	Raw native intersection observer entry record.

useIntersectionObserver

Installation

Usage

Props & Parameters

Returns

Command Palette