Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-window-infinite-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 onRowsLoaded = useInfiniteLoader(props);

  return <List onRowsLoaded={onRowsLoaded} {...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}>
      {({ onRowsLoaded }) => <List onRowsLoaded={onRowsLoaded} {...rest} />}
    </InfiniteLoader>
  );
}

Required props

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.

Optional props

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.