useScrollTrigger.js
1.63 KB
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
'use client';
import * as React from 'react';
function defaultTrigger(store, options) {
const {
disableHysteresis = false,
threshold = 100,
target
} = options;
const previous = store.current;
if (target) {
// Get vertical scroll
store.current = target.pageYOffset !== undefined ? target.pageYOffset : target.scrollTop;
}
if (!disableHysteresis && previous !== undefined) {
if (store.current < previous) {
return false;
}
}
return store.current > threshold;
}
const defaultTarget = typeof window !== 'undefined' ? window : null;
export default function useScrollTrigger(options = {}) {
const {
getTrigger = defaultTrigger,
target = defaultTarget,
...other
} = options;
const store = React.useRef();
const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
React.useEffect(() => {
if (target === null) {
return setTrigger(false);
}
const handleScroll = () => {
setTrigger(getTrigger(store, {
target,
...other
}));
};
handleScroll(); // Re-evaluate trigger when dependencies change
target.addEventListener('scroll', handleScroll, {
passive: true
});
return () => {
target.removeEventListener('scroll', handleScroll, {
passive: true
});
};
// See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [target, getTrigger, JSON.stringify(other)]);
return trigger;
}