InfiniteLoader component inspired by react-virtualized but for use with react-window


# Yarn
yarn add react-window-infinite-loader

npm install --save react-window-infinite-loader


Name Type Description
children ({ onItemsRendered: Function, ref: React$Ref }) => React$Node Render prop. See below for example usage.
isItemLoaded (index: number) => boolean Function responsible for tracking the loaded state of each item.
itemCount number Number of rows in list; can be arbitrary high number if actual number is unknown.
loadMoreItems (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.
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.

Example usage

The snippet below shows a basic example of how the InfiniteLoader can be used to wrap either a FixedSizeList or VariableSizeList from react-window.

// This value is arbitrary.
// If you know the size of your remote data, you can provide a real value.
// You can also increase this value gradually (as shown in the example below).
const itemCount = 1000;

  {({ onItemsRendered, ref }) => (

Try it on Code Sandbox

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.