Observer

Observer는 useIntersectionObserver를 통해 IntersectionObserver를 사용하고, 관찰 중인 div가 intersecting일 때만 children을 렌더링합니다.

import { Observer } from '@ilokesto/utilinent';

<Observer fallback={<CardPlaceholder />} rootMargin="120px" triggerOnce>
  <ExpensiveCard />
</Observer>

프로퍼티

Prop	Type	설명
`children`	`ReactNode \| (isIntersecting) => ReactNode`	intersecting일 때 렌더링할 content입니다.
`fallback`	`ReactNode`	intersecting이 아닐 때 렌더링됩니다.
`threshold`	`number \| number[]`	Intersection threshold입니다. 기본값은 `0`입니다.
`rootMargin`	`string`	Observer root margin입니다. 기본값은 `"0%"`입니다.
`triggerOnce`	`boolean`	첫 intersection 이후 observing을 멈춥니다.
`onIntersect`	`(isIntersecting, entry) => void`	initial observation 이후 entering intersection 시 호출됩니다.
`keepMeasurable`	`boolean`	content가 없어도 관찰 가능하도록 최소 1×1px box와 `display: block`을 강제합니다. 기본값은 `false`입니다.

Observer는 Show.div를 통해 렌더링되므로 observed element는 div이고 일반 div props/ref를 받을 수 있습니다.

Observer

프로퍼티

목차