/
useScrollTrigger.js
44 lines (35 loc) · 1.38 KB
/
useScrollTrigger.js
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
'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(() => {
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
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [target, getTrigger, JSON.stringify(other)]);
return trigger;
}