onceを付けると、最初に見えた時点で観測をやめ、その後に外れてもfalseを知らせません。
要素が複数あるときは、どれか1つでも見えていればtrueになります。後から増えたり外れたりした要素にも追従し、観測する要素が無い間は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 |
Scroll down.
Target
Scroll down, then back up. The badge stays.
Target
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>