-
Notifications
You must be signed in to change notification settings - Fork 15
/
HookExample.js
51 lines (42 loc) · 1.63 KB
/
HookExample.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
45
46
47
48
49
50
51
import React, { useCallback } from 'react';
import { useBottomScrollListener } from 'react-bottom-scroll-listener';
const HookExample = ({ alertOnBottom }) => {
const handleOnDocumentBottom = useCallback(() => {
console.log('I am at bottom! ' + Math.round(performance.now()));
if (alertOnBottom) {
alert('Bottom hit!');
}
}, [alertOnBottom]);
const handleContainerOnBottom = useCallback(() => {
console.log('I am at bottom in optional container! ' + Math.round(performance.now()));
if (alertOnBottom) {
alert('Bottom of this container hit!');
}
}, [alertOnBottom]);
/* This will trigger handleOnDocumentBottom when the body of the page hits the bottom */
useBottomScrollListener(handleOnDocumentBottom);
/* This will trigger handleOnContainerBottom when the container that is passed the ref hits the bottom */
const containerRef = useBottomScrollListener(handleContainerOnBottom);
return (
<div className="root">
<div className="scroll-box">
<h1>Hook example</h1>
<h2>Callback when document hits bottom</h2>
<div>Scroll down! ▼▼▼</div>
<div>A bit more... ▼▼</div>
<div>Almost there... ▼</div>
<div>You've reached the bottom!</div>
</div>
<div>
<div ref={containerRef} className="inner-scroll-example">
<h4>Callback when this container hits bottom</h4>
<div>Scroll down! ▼▼▼</div>
<div>A bit more... ▼▼</div>
<div>Almost there... ▼</div>
<div>You've reached the bottom!</div>
</div>
</div>
</div>
);
};
export default HookExample;