react-window-infinite-loader provides utilities for implementing infinite scrolling lists with `react-window`. It is inspired by `react-virtualized`'s `InfiniteLoader` but is specifically designed to work as a lightweight companion for `react-window`'s fixed and variable size lists. The current stable version is 2.0.1, released as of this documentation. The library's release cadence is tied to its maintainer's work on `react-window` and `react-virtualized`, often seeing updates for React compatibility or minor feature enhancements. Key differentiators include its tight integration with `react-window`, offering both a `useInfiniteLoader` hook for functional components and a `InfiniteLoader` component for class-based or render-prop patterns, making it adaptable to various component architectures. It helps manage the loaded state of rows and triggers data loading as users scroll near the end of the list.
npm install react-window-infinite-loaderVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to use the `useInfiniteLoader` hook with `react-window`'s `FixedSizeList` to implement a basic infinite scrolling list. It simulates fetching data asynchronously and updates the list as new rows are loaded.
Update the render prop signature for `InfiniteLoader` from `{ onItemsRendered, listRef }` to `{ onRowsRendered }`. Pass the `onRowsRendered` prop to your `react-window` list component.Ensure your `loadMoreRows` function is `async` or explicitly returns a Promise. For example: `async (startIndex, stopIndex) => { await fetchData(startIndex, stopIndex); }` or `(startIndex, stopIndex) => { return new Promise(resolve => fetchData(startIndex, stopIndex).then(resolve)); }`.Ensure your `isRowLoaded` function correctly checks the loaded state for the given `index` against your data source. This often involves checking if `index < yourDataSource.length` or if a specific item in your data array at `index` is defined.
Make sure your `loadMoreRows` function returns a Promise that resolves when data fetching is complete. If using `async/await`, ensure the `async` keyword is present. If using a standard Promise, ensure it is explicitly returned.
Ensure `useInfiniteLoader` is only called at the top level of a functional React component or within another custom hook that itself adheres to React Hook rules.