Scroll down.
Target
With once, observation stops the first time the children are in view, and leaving afterwards reports nothing.
Scroll down, then back up. The badge stays.
Target
With several elements, it is true while any of them is in view, and it follows elements that mount or unmount later. While there is nothing to observe it is false.
childrenReactNodeonChange(isInView: boolean) => voidonce?booleanfalseroot?Element|nullnullrootMargin?string'0px'threshold?number0| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
onChange | (isInView: boolean) => void | - |
once? | boolean | false |
root? | Element|null | null |
rootMargin? | string | '0px' |
threshold? | number | 0 |
import { InView } from '@k8ordo/ui';const [container, setContainer] = useState<HTMLElement | null>(null);
const [isInView, setIsInView] = useState(false);
<div ref={setContainer} className="h-48 overflow-y-auto">
<InView onChange={setIsInView} root={container}>
<p>Target</p>
</InView>
</div><InView once onChange={setHasBeenSeen} root={container}>
<p>Target</p>
</InView>