react-window-infinite-loader

react-window-infinite-loader

Infinite loader utils inspired by react-virtualized but for use with react-window.

Try it out on StackBlitz

If you like this project, become a sponsor or buy me a coffee.

Installation

Begin by installing the library from NPM:

npm install react-window-infinite-loader

Documentation

The recommended way to use this library is the new useInfiniteLoader hook:

import { useInfiniteLoader } from "react-window-infinite-loader";

function Example() {
  const onRowsRendered = useInfiniteLoader(props);

  return <List onRowsRendered={onRowsRendered} {...rest} />;
}

The InfiniteLoader component also exists, though it has changed since version 1:

• Child function onItemsRendered parameter renamed to onRowsRendered
• Child function listRef parameter removed

import { InfiniteLoader } from "react-window-infinite-loader";

function Example() {
  return (
    <InfiniteLoader {...props}>
      {({ onRowsRendered }) => <List onRowsRendered={onRowsRendered} {...rest} />}
    </InfiniteLoader>
  );
}

InfiniteLoader

Loads rows as they are scrolled into view; a render prop alternative to the useInfiniteLoader hook.

The useInfiniteLoader hook accepts the same props, except for children.

Required props

Name	Description
isRowLoaded	Function responsible for tracking the loaded state of each item.
loadMoreRows	Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.
rowCount	Number of rows in list; can be arbitrary high number if actual number is unknown.
children	Render prop that receives an onRowsRendered callback to pass to a List.

Optional props

Name	Description
minimumBatchSize	Minimum number of rows to be loaded at a time; defaults to 10. This property can be used to batch requests to reduce HTTP requests.
threshold	Threshold at which to pre-fetch data; defaults to 15. A threshold of 15 means that data will start loading when a user scrolls within 15 rows.