A hook that observes element visibility via IntersectionObserver.
refRefObject<T | null>callback(entry: IntersectionObserverEntry) => voidoptions.thresholdnumber|number[]0options.rootElement|nullnulloptions.rootMarginstring'0px'options.oncebooleanfalse| Prop | Type | Default |
|---|---|---|
ref | RefObject<T | null> | - |
callback | (entry: IntersectionObserverEntry) => void | - |
options.threshold | number|number[] | 0 |
options.root | Element|null | null |
options.rootMargin | string | '0px' |
options.once | boolean | false |
voidvoid| Prop | Type | Default |
|---|---|---|
void | void | - |
import { useIntersectionObserver } from '@k8ordo/ui';const ref = useRef<HTMLDivElement>(null);
useIntersectionObserver(ref, (entry) => {
console.log('isIntersecting:', entry.isIntersecting);
}, { threshold: 0.5 });
return <div ref={ref}>Observed element</div>;const ref = useRef<HTMLDivElement>(null);
useIntersectionObserver(ref, (entry) => {
if (entry.isIntersecting) {
// Triggered only once
loadContent();
}
}, { once: true });
return <div ref={ref}>Lazy loaded content</div>;