use-infinite-scrolling

A React Hook for infinite scrolling on virtually any vertically scrollable element.

Installation

npm install use-infinite-scrolling

Usage

In your component, initialize the Hook using useInfiniteScrolling like so:

const MyComponent = () => {
  const onBottomHit = () => {
    console.log('bottom reached');
  };

  const elemRef = useRef(null);
  useInfiniteScrolling(elemRef, onBottomHit, { gap: 0 });

  return <div ref={elemRef} />;
}

You must provide at least ref (first parameter) and onBottomHit (second parameter) to useInfiniteScrolling.

Make sure that the element which is targeted via ref has the overflow-y CSS property set to auto or scroll to enable infinite scrolling.

As a third parameter you may pass a configuration object which currently has one supported property called gap. It determines the pixel distance between the bottom of the scroll container and the vertical scroll position at which to call onBottomHit. By default, gap is zero, or, in other words, onBottomHit will only be executed when the bottom of the scroll container has been reached (not before). If gap is set to 100, onBottomHit will be called as soon as the scroll position is 100 pixels or less before the bottom of the scroll container. If gap is set to a negative value, it will be evaluated as zero.

License

• MIT (see LICENSE)