Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { useEffect, useRef } from 'react';
import { INTERSECTION_OBSERVER_THRESHOLD } from '@/lib/constants/group-list';
interface UseIntersectionObserverParams {
onIntersect: () => void;
enabled?: boolean;
threshold?: number;
root?: Element | null;
}
export const useIntersectionObserver = ({
onIntersect,
enabled = true,
threshold = INTERSECTION_OBSERVER_THRESHOLD,
root = null,
}: UseIntersectionObserverParams) => {
const targetRef = useRef<HTMLDivElement>(null);
const onIntersectRef = useRef(onIntersect);
useEffect(() => {
onIntersectRef.current = onIntersect;
}, [onIntersect]);
useEffect(() => {
const target = targetRef.current;
if (!target || !enabled) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
onIntersectRef.current();
}
},
{
threshold,
root,
},
);
observer.observe(target);
return () => {
observer.disconnect();
};
}, [enabled, threshold, root]);
return targetRef;
};
|