Infinite loader utils inspired by react-virtualized
but for use with react-window
.
If you like this project, 🎉 become a sponsor or ☕ buy me a coffee.
Begin by installing the library from NPM:
npm install react-window-infinite-loader
The recommended way to use this library is the new useInfiniteLoader
hook:
import { useInfiniteLoader } from "react-window-infinite-loader";
function Example() {
const onRowsLoaded = useInfiniteLoader(props);
return <List onRowsLoaded={onRowsLoaded} {...rest} />;
}
The InfiniteLoader
component also exists, though it has changed since version 1:
onItemsRendered
parameter renamed to onRowsRendered
listRef
parameter removedimport { InfiniteLoader } from "react-window-infinite-loader";
function Example() {
return (
<InfiniteLoader {...props}>
{({ onRowsLoaded }) => <List onRowsLoaded={onRowsLoaded} {...rest} />}
</InfiniteLoader>
);
}
| Name | Type | Description |
| --- | --- | --- |
| children
| ({ onRowsRendered: Function }) => ReactNode
| Render prop; see below for example usage. |
| isRowLoaded
| (index: number) => boolean
| Function responsible for tracking the loaded state of each row. |
| loadMoreRows
| (startIndex: number, stopIndex: number) => Promise<void>
| 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
| Number of rows in list; can be arbitrary high number if actual number is unknown. |
| Name | Type | Description |
| --- | --- | --- |
| minimumBatchSize
| number
| 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
| number
| 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. |