-
Notifications
You must be signed in to change notification settings - Fork 7
/
useIntersectionObserver.ts
108 lines (85 loc) · 3.03 KB
/
useIntersectionObserver.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { useState, useCallback, useRef } from 'react';
import { CachedIntersectionObserver, createObserverCache } from './utils';
import { Omit } from './types';
const DEFAULT_ROOT_MARGIN = '0px';
const DEFAULT_THRESHOLD = [0];
export type IntersectionObserverHookArgs = Omit<
IntersectionObserverInit,
'root'
>;
export type IntersectionObserverHookRefCallbackNode = Element | null;
export type IntersectionObserverHookRefCallback = (
node: IntersectionObserverHookRefCallbackNode,
) => void;
export type IntersectionObserverHookRootRefCallbackNode = IntersectionObserverInit['root'];
export type IntersectionObserverHookRootRefCallback = (
node: IntersectionObserverHookRootRefCallbackNode,
) => void;
export type IntersectionObserverHookResult = [
IntersectionObserverHookRefCallback,
{
entry: IntersectionObserverEntry | undefined;
rootRef: IntersectionObserverHookRootRefCallback;
},
];
const observerCache = createObserverCache();
// For more info:
// https://developers.google.com/web/updates/2016/04/intersectionobserver
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
function useIntersectionObserver(
args?: IntersectionObserverHookArgs,
): IntersectionObserverHookResult {
const rootMargin = args?.rootMargin ?? DEFAULT_ROOT_MARGIN;
const threshold = args?.threshold ?? DEFAULT_THRESHOLD;
const nodeRef = useRef<IntersectionObserverHookRefCallbackNode>(null);
const rootRef = useRef<IntersectionObserverHookRootRefCallbackNode>(null);
const observerRef = useRef<CachedIntersectionObserver | null>(null);
const [entry, setEntry] = useState<IntersectionObserverEntry>();
const observe = useCallback(() => {
const node = nodeRef.current;
if (!node) {
setEntry(undefined);
return;
}
const observer = observerCache.getObserver({
root: rootRef.current,
rootMargin,
threshold,
});
observer.observe(node, (observedEntry) => {
setEntry(observedEntry);
});
observerRef.current = observer;
}, [rootMargin, threshold]);
const unobserve = useCallback(() => {
const currentObserver = observerRef.current;
const node = nodeRef.current;
if (node) {
currentObserver?.unobserve(node);
}
observerRef.current = null;
}, []);
// React will call the ref callback with the DOM element when the component mounts,
// and call it with null when it unmounts.
// So, we don't need an useEffect etc to unobserve nodes.
// When nodeRef.current is null, it will be unobserved and observe function
// won't do anything.
const refCallback = useCallback<IntersectionObserverHookRefCallback>(
(node) => {
unobserve();
nodeRef.current = node;
observe();
},
[observe, unobserve],
);
const rootRefCallback = useCallback<IntersectionObserverHookRootRefCallback>(
(rootNode) => {
unobserve();
rootRef.current = rootNode;
observe();
},
[observe, unobserve],
);
return [refCallback, { entry, rootRef: rootRefCallback }];
}
export default useIntersectionObserver;