Observer
Observer uses IntersectionObserver through useIntersectionObserver and renders its children only when the observed div is intersecting.
import { Observer } from '@ilokesto/utilinent';
<Observer fallback={<CardPlaceholder />} rootMargin="120px" triggerOnce>
<ExpensiveCard />
</Observer>Props
| Prop | Type | Description |
|---|---|---|
children | `ReactNode | (isIntersecting) => ReactNode` |
fallback | ReactNode | Rendered while not intersecting. |
threshold | `number | number[]` |
rootMargin | string | Observer root margin. Defaults to "0px". |
triggerOnce | boolean | Stop observing after first intersection. |
onIntersect | (isIntersecting, entry) => void | Called when entering intersection after initial observation. |
Observer renders through Show.div, so the observed element is a div and accepts normal div props/ref.