-
Notifications
You must be signed in to change notification settings - Fork 0
/
use-intersection.ts
71 lines (59 loc) · 2.01 KB
/
use-intersection.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
import { useEffect, useRef } from 'react';
import { noop } from './utils';
export type Props = IntersectionObserverInit & {
onIntersect?: (isIntersecting: boolean, entry?: IntersectionObserverEntry) => void;
onEnter?: (entry?: IntersectionObserverEntry) => void;
onLeave?: (entry?: IntersectionObserverEntry) => void;
enabled?: boolean;
};
/**
* Tracks an HTML element's intersection.
*
* •
*
* @param options Options.
* @param options.root Intersection observer option.
* @param options.rootMargin Intersection observer option.
* @param options.threshold Intersection observer option.
* @param {Function} options.onIntersect Callback fired on enter & leave.
* @param {Function} options.onEnter Callback fired on enter.
* @param {Function} options.onLeave Callback fired on leave.
* @param {boolean} [options.enabled=true] Enable intersection observer (default `true`).
*/
export function useIntersection<T extends Element = HTMLDivElement>({
onIntersect = noop,
onEnter = noop,
onLeave = noop,
enabled = true,
...options
}: Props) {
const ref = useRef<T | null>(null);
const onIntersectRef = useRef(onIntersect);
const onEnterRef = useRef(onEnter);
const onLeaveRef = useRef(onLeave);
useEffect(() => {
onIntersectRef.current = onIntersect;
}, [onIntersect]);
useEffect(() => {
onEnterRef.current = onEnter;
}, [onEnter]);
useEffect(() => {
onLeaveRef.current = onLeave;
}, [onLeave]);
useEffect(() => {
if (!enabled || !ref.current || typeof IntersectionObserver !== 'function') {
return;
}
const observer = new IntersectionObserver(([entry]) => {
onIntersectRef.current(entry.isIntersecting, entry);
if (entry.isIntersecting) onEnterRef.current(entry);
else onLeaveRef.current(entry);
}, options);
observer.observe(ref.current);
return () => {
observer.disconnect();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [enabled, options.root, options.rootMargin, options.threshold]);
return ref;
}