MCPcopy Index your code
hub / github.com/bvaughn/react-window-infinite-loader

github.com/bvaughn/react-window-infinite-loader @2.0.1

Chat with this repo
repository ↗ · DeepWiki ↗ · release 2.0.1 ↗ · + Follow
5 symbols 25 edges 11 files 0 documented · 0% 14 cross-repo links
What it actually does AI analysis from the code graph — generated when you open this
loading…
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 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>
  );
}

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.

Core symbols most depended-on inside this repo

scanForUnloadedIndices
called by 7
src/scanForUnloadedIndices.ts
useInfiniteLoader
called by 5
src/useInfiniteLoader.ts
InfiniteLoader
called by 0
src/InfiniteLoader.ts

Shape

Function 5

Languages

TypeScript100%

Modules by API surface

src/useInfiniteLoader.test.ts2 symbols
src/useInfiniteLoader.ts1 symbols
src/scanForUnloadedIndices.ts1 symbols
src/InfiniteLoader.ts1 symbols

For agents

$ claude mcp add react-window-infinite-loader \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact