React-use-infinite-loader NPM

react-use-infinite-loader :infinity: :page_with_curl: :hourglass_flowing_sand:

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.

:warning: 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

Property	Default value	Description
loadMore	required	Invoked when the user scrolls into the observable viewport + its rootMargin; read about rootMargin and thresholds here.
canLoadMore	`false`	Tells useInfiniteLoader whether to run `loadMore` when the observer is triggered, this is usually set dynamically.
rootMargin	`"100px 0px 0px 0px"`	Read about `rootMargin` here.
threshold	`0`	Read about `threshold` here.
initialise	`true`	Used for if your data fetching library fetches page 0 and renders it when the component loads, to use this just have a state flag that you set to false once the initial load from your data fetching lib has happened.
startFromPage	`0`	Used if you already load page 0 on mount, you can tell useInfiniteLoader what page to begin loading more from.
debug	`false`	Prints some helpful messages about what useInfiniteLoader is doing.

`useInfiniteLoader` result object

Property	Description
`loaderRef`	A React ref that you must pass to an element via `ref={loaderRef}`, this element must sit directly below your list of items that you're loading
`page`	The current page that `useInfiniteLoader` has loaded
`resetPage`	A function that resets the current page to `startFromPage` (default `0`). This is useful if you change the context of the page but the component instance is the same