useOnScrollToBottom implemented

src/common/index.js

@@ -36,6 +36,7 @@ const useDeepEqualState = require('./useDeepEqualState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
 const useModelState = require('./useModelState');
+const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
 
@@ -78,6 +79,7 @@ module.exports = {
     useFullscreen,
     useLiveRef,
     useModelState,
+    useOnScrollToBottom,
     useProfile,
     useStreamingServer
 };

src/common/useOnScrollToBottom.js

@@ -0,0 +1,20 @@
+const React = require('react');
+
+const useOnScrollToBottom = (cb, threshold = 0) => {
+    const triggeredRef = React.useRef(false);
+    const onScroll = React.useCallback((event) => {
+        if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight - threshold) {
+            if (!triggeredRef.current) {
+                triggeredRef.current = true;
+                if (typeof cb === 'function') {
+                    cb(event);
+                }
+            }
+        } else {
+            triggeredRef.current = false;
+        }
+    }, [cb]);
+    return onScroll;
+};
+
+module.exports = useOnScrollToBottom;