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