要素がビューポート内に表示されているかを返すフック
refRefObject<T | null>options.thresholdnumber|number[]0options.rootElement|nullnulloptions.rootMarginstring'0px'options.oncebooleanfalse| Prop | Type | Default |
|---|---|---|
ref | RefObject<T | null> | - |
options.threshold | number|number[] | 0 |
options.root | Element|null | null |
options.rootMargin | string | '0px' |
options.once | boolean | false |
Not visible
isInViewboolean| Prop | Type | Default |
|---|---|---|
isInView | boolean | - |
import { useInView } from '@k8ordo/ui';const ref = useRef<HTMLDivElement>(null);
const isInView = useInView(ref, { threshold: 0.5 });
return (
<div ref={ref}>
{isInView ? 'Visible' : 'Not visible'}
</div>
);