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

 !Run puppeteer tests on the example code 

> 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
``bash
yarn add react-use-infinite-loader
`
Add to your app
`javascript
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
`javascript
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.
`javascript
return (
<>


My App

{items.map(item =>

{item}

)}