useScrollableRef
Get scroll events with an optional 'bottom reached' threshold for any DOM node that's attached with a ref.
This can be useful for scroll, height, and offset calculations for a child node instead of the window, e.g., inifite scrolling a
div
in the document that has a scroll overflow (overflow: scroll
)
Install
npm install use-scrollable-ref
Example usage
import { useEffect } from "react";
import useScrollableRef from "use-scrollable-ref";
export default function App() {
// bottom is 75% of ref height
const bottomThreshold = 75;
const {
scrollableRef,
scrollHeight,
scrollPosition,
scrollOffsetHeight,
scrollableBottomReached,
} = useScrollableRef({ bottomThreshold });
useEffect(() => {
if (!scrollableBottomReached) return;
// do something ...
}, [scrollableBottomReached]);
return (
<div>
<main ref={scrollableRef}>
Scrollable content here ...
</main>
</div>
)
}
API
This hook accepts an optional bottomThreshold
which is the % of the current scroll position from the top of the ref element's height. By default this is set to 75
The hook returns the following:
-
scrollableRef
- A ref to be attached to the HTMLElement -
scrollableBottomReached
- a boolean indicating whether the bottomThreshold of the ref element has been reached. -
scrollHeight
- https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight -
scrollPosition
- https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop -
scrollOffsetHeight
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
License
MIT © Geoff Ereth