UNPKG

1.73 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3const _excluded = ["getTrigger", "target"];
4import * as React from 'react';
5
6function defaultTrigger(store, options) {
7 const {
8 disableHysteresis = false,
9 threshold = 100,
10 target
11 } = options;
12 const previous = store.current;
13
14 if (target) {
15 // Get vertical scroll
16 store.current = target.pageYOffset !== undefined ? target.pageYOffset : target.scrollTop;
17 }
18
19 if (!disableHysteresis && previous !== undefined) {
20 if (store.current < previous) {
21 return false;
22 }
23 }
24
25 return store.current > threshold;
26}
27
28const defaultTarget = typeof window !== 'undefined' ? window : null;
29export default function useScrollTrigger(options = {}) {
30 const {
31 getTrigger = defaultTrigger,
32 target = defaultTarget
33 } = options,
34 other = _objectWithoutPropertiesLoose(options, _excluded);
35
36 const store = React.useRef();
37 const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
38 React.useEffect(() => {
39 const handleScroll = () => {
40 setTrigger(getTrigger(store, _extends({
41 target
42 }, other)));
43 };
44
45 handleScroll(); // Re-evaluate trigger when dependencies change
46
47 target.addEventListener('scroll', handleScroll, {
48 passive: true
49 });
50 return () => {
51 target.removeEventListener('scroll', handleScroll, {
52 passive: true
53 });
54 }; // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
55 // eslint-disable-next-line react-hooks/exhaustive-deps
56 }, [target, getTrigger, JSON.stringify(other)]);
57 return trigger;
58}
\No newline at end of file