29 lines
630 B
TypeScript
29 lines
630 B
TypeScript
import { useEffect } from 'react';
|
|
|
|
export default function useVisible({
|
|
ref,
|
|
onVisible,
|
|
onHidden,
|
|
}: {
|
|
ref: React.RefObject<HTMLElement | null>,
|
|
onVisible?: () => void,
|
|
onHidden?: () => void,
|
|
}) {
|
|
useEffect(() => {
|
|
if (ref.current && (onVisible || onHidden)) {
|
|
const observer = new IntersectionObserver(e => {
|
|
if (e[0].isIntersecting) {
|
|
onVisible?.();
|
|
} else {
|
|
onHidden?.();
|
|
}
|
|
}, {
|
|
root: null,
|
|
threshold: 0,
|
|
});
|
|
observer.observe(ref.current);
|
|
return () => observer.disconnect();
|
|
}
|
|
}, [ref, onVisible, onHidden]);
|
|
}
|