use-scrollable-ref
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

Build Status NPM

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:

License

MIT © Geoff Ereth

Package Sidebar

Install

npm i use-scrollable-ref

Weekly Downloads

14

Version

1.0.2

License

MIT

Unpacked Size

7.52 kB

Total Files

6

Last publish

Collaborators

  • geoffereth