/
use-intersection.tsx
102 lines (87 loc) · 2.43 KB
/
use-intersection.tsx
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
import { useCallback, useEffect, useRef, useState } from 'react'
type UseIntersectionObserverInit = Pick<IntersectionObserverInit, 'rootMargin'>
type UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit
type ObserveCallback = (isVisible: boolean) => void
const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined'
export function useIntersection<T extends Element>({
rootMargin,
disabled,
}: UseIntersection): [(element: T | null) => void, boolean] {
const isDisabled = disabled || !hasIntersectionObserver
const unobserve = useRef<Function>()
const [visible, setVisible] = useState(false)
const setRef = useCallback(
(el: T | null) => {
if (unobserve.current) {
unobserve.current()
unobserve.current = undefined
}
if (isDisabled || visible) return
if (el && el.tagName) {
unobserve.current = observe(
el,
(isVisible) => isVisible && setVisible(isVisible),
{ rootMargin }
)
}
},
[isDisabled, rootMargin, visible]
)
useEffect(() => {
if (!hasIntersectionObserver) {
if (!visible) setVisible(true)
}
}, [visible])
return [setRef, visible]
}
function observe(
element: Element,
callback: ObserveCallback,
options: UseIntersectionObserverInit
) {
const { id, observer, elements } = createObserver(options)
elements.set(element, callback)
observer.observe(element)
return function unobserve() {
observer.unobserve(element)
// Destroy observer when there's nothing left to watch:
if (elements.size === 0) {
observer.disconnect()
observers.delete(id)
}
}
}
const observers = new Map<
string,
{
id: string
observer: IntersectionObserver
elements: Map<Element, ObserveCallback>
}
>()
function createObserver(options: UseIntersectionObserverInit) {
const id = options.rootMargin || ''
let instance = observers.get(id)
if (instance) {
return instance
}
const elements = new Map<Element, ObserveCallback>()
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const callback = elements.get(entry.target)
const isVisible = entry.isIntersecting || entry.intersectionRatio > 0
if (callback && isVisible) {
callback(isVisible)
}
})
}, options)
observers.set(
id,
(instance = {
id,
observer,
elements,
})
)
return instance
}