`useIntersectionObserver`

Observes intersection of an element with its scroll container (or the viewport by default). Returns the latest IntersectionObserverEntry, or null before the first callback. Use entry.isIntersecting for the common visibility check, or read the intersectionRatio / boundingClientRect fields for scroll-driven effects.

Set once: true to disconnect after the first intersection — useful for “load when visible” patterns.


import { useRef } from 'react'
import { useIntersectionObserver } from '@wire-ui/react'
 
function LazyImage({ src }: { src: string }) {
  const ref = useRef<HTMLDivElement>(null)
  const entry = useIntersectionObserver(ref, { threshold: 0.1, once: true })
  const isVisible = entry?.isIntersecting ?? false
 
  return (
    <div ref={ref} className="h-48 w-full">
      {isVisible && <img src={src} alt="" />}
    </div>
  )
}

Parameters

Param	Type	Description
`ref`	`RefObject<Element \| null>`	Element to observe.
`options`	`UseIntersectionObserverOptions`	See below.

Options

All native IntersectionObserverInit fields are supported in addition to:

Option	Type	Default	Description
`root`	`Element \| Document \| null`	viewport	Scroll container.
`rootMargin`	`string`	`'0px'`	Margin around the root.
`threshold`	`number \| number[]`	`0`	Visibility thresholds.
`once`	`boolean`	`false`	Disconnect after the first intersection.
`enabled`	`boolean`	`true`	Skip observation while `false`.

Returns

IntersectionObserverEntry \| null — the latest entry, or null before the first callback.