react-use-infinite-loader ♾️ 📃 ⏳

Super lightweight infinite loading hook for React apps

react-use-infinite-loader uses the IntersectionObserver to provide a performant solution to infinite scrolling that doesn't involve scroll event listeners.

⚠️ Some older browsers may not support the IntersectionObserver API, however you can easily polyfill the functionality with this.

As the name suggests react-use-infinite-loader uses React Hooks, so you need to be using React function components to use this library.

Usage

See example/ for a full example (recommended), run it locally with yarn start. Also view it in the browser

Install with

yarn add react-use-infinite-loader

Add to your app

import useInfiniteLoader from 'react-use-infinite-loader';

Implement the hook. Ensure that the initial content page size flows off the page so that the next page isn't instantly fetched

const [canLoadMore, setCanLoadMore] = React.useState(true);
const [data, setData] = React.useState([]);
const loadMore = React.useCallback((page) => {
  loadFromAPI(page).then(response => {
    setCanLoadMore(response.canLoadMore);
    setData(currentData => [...currentData, ...response.data]);
  });
});
const { loaderRef } = useInfiniteLoader({ loadMore, canLoadMore });

Give the loaderRef that's returned from the hook to a div that sits directly below your rendered content list. Give it a classname that you'll use in the next step.

return (
  <>
    <h1>My App</h1>
    {items.map(item => <div>{item}</div>)}
    <div ref={loaderRef} className="loaderRef" />
  </>
);

Add the following CSS to your apps to allow the observer to see the div and know to load more data. Note that if you always have a DOM node with at least 1px height and width below the loaderRef div then you don't need to add this CSS. A common example where the CSS isn't required would be {canLoadMore && <div>Loading page {page + 1}</div>}.

/* You can change the name here and in your JSX if you want to */
.loaderRef {
  width: 1px;
  height: 1px;
  position: absolute;
}

API Reference

useInfiniteLoader arguments object

useInfiniteLoader result object