-
Notifications
You must be signed in to change notification settings - Fork 0
/
useIntersect.ts
34 lines (27 loc) · 871 Bytes
/
useIntersect.ts
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
import { useEffect, useState, useRef } from "react";
export const useIntersect = () => {
const [intersecting, setIntersecting] = useState(false);
const [node, setNode] = useState<Element | null>(null);
const observeOptions = {
root: null,
rootMargin: "0px",
};
const observerCallback = (entries: IntersectionObserverEntry[]) => {
const intersecting = entries.some(entry => entry.isIntersecting);
setIntersecting(intersecting);
};
const observer = useRef(new IntersectionObserver(observerCallback, observeOptions));
useEffect(() => {
const { current: currentObserver } = observer;
if (currentObserver) {
currentObserver.disconnect();
}
if (node) {
currentObserver.observe(node);
}
return () => {
currentObserver.disconnect();
};
}, [node]);
return { intersecting, ref: setNode };
};