### Installation

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

Install the react-window-infinite-loader library using npm.

```APIDOC
## Installation

Begin by installing the library from NPM:

```sh
npm install react-window-infinite-loader
```
```

--------------------------------

### Install react-window-infinite-loader

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

The command to install the library via the NPM package manager.

```shell
npm install react-window-infinite-loader
```

--------------------------------

### useInfiniteLoader Hook

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

Demonstrates the recommended way to use the library with the useInfiniteLoader hook.

```APIDOC
## useInfiniteLoader Hook

The recommended way to use this library is the new `useInfiniteLoader` hook:

```tsx
import { useInfiniteLoader } from "react-window-infinite-loader";

function Example() {
  const onRowsRendered = useInfiniteLoader(props);

  return <List onRowsRendered={onRowsRendered} {...rest} />;
}
```
```

--------------------------------

### Implement Infinite Loading with useInfiniteLoader Hook

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

Demonstrates the recommended hook-based approach to handle row rendering callbacks in a virtualized list.

```tsx
import { useInfiniteLoader } from "react-window-infinite-loader";

function Example() {
  const onRowsRendered = useInfiniteLoader(props);

  return <List onRowsRendered={onRowsRendered} {...rest} />;
}
```

--------------------------------

### Implement Infinite Loading with useInfiniteLoader Hook

Source: https://context7.com/bvaughn/react-window-infinite-loader/llms.txt

Demonstrates how to use the useInfiniteLoader hook to manage data fetching in a virtualized list. It includes row state tracking, an asynchronous loading function, and integration with the react-window List component.

```tsx
import { useState, useCallback } from "react";
import { FixedSizeList as List } from "react-window";
import { useInfiniteLoader } from "react-window-infinite-loader";

async function fetchItems(startIndex: number, stopIndex: number): Promise<string[]> {
  await new Promise(resolve => setTimeout(resolve, 500));
  const items: string[] = [];
  for (let i = startIndex; i <= stopIndex; i++) {
    items.push(`Item ${i}`);
  }
  return items;
}

function InfiniteList() {
  const [items, setItems] = useState<Record<number, string>>({});
  const rowCount = 10000;

  const isRowLoaded = useCallback(
    (index: number) => items[index] !== undefined,
    [items]
  );

  const loadMoreRows = useCallback(
    async (startIndex: number, stopIndex: number) => {
      const newItems = await fetchItems(startIndex, stopIndex);
      setItems(prev => {
        const updated = { ...prev };
        newItems.forEach((item, i) => {
          updated[startIndex + i] = item;
        });
        return updated;
      });
    },
    []
  );

  const onRowsRendered = useInfiniteLoader({
    isRowLoaded,
    loadMoreRows,
    rowCount,
    minimumBatchSize: 20,
    threshold: 10,
  });

  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
    <div style={style}>
      {items[index] || "Loading..."}
    </div>
  );

  return (
    <List
      height={400}
      width={300}
      itemCount={rowCount}
      itemSize={35}
      onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
        onRowsRendered({ startIndex: visibleStartIndex, stopIndex: visibleStopIndex });
      }}
    >
      {Row}
    </List>
  );
}
```

--------------------------------

### InfiniteLoader Component

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

Shows how to use the InfiniteLoader component, noting changes from version 1.

```APIDOC
## InfiniteLoader Component

The `InfiniteLoader` component also exists, though it has changed since version 1:
- Child function `onItemsRendered` parameter renamed to `onRowsRendered`
- Child function `listRef` parameter removed

```tsx
import { InfiniteLoader } from "react-window-infinite-loader";

function Example() {
  return (
    <InfiniteLoader {...props}>
      {({
        onRowsRendered
      }) => <List onRowsRendered={onRowsRendered} {...rest} />}
    </InfiniteLoader>
  );
}
```
```

--------------------------------

### Configure InfiniteLoader Props

Source: https://context7.com/bvaughn/react-window-infinite-loader/llms.txt

Shows the configuration object for the InfiniteLoader and useInfiniteLoader, including required data-loading functions and optional performance tuning parameters like batch size and threshold.

```tsx
import { useInfiniteLoader } from "react-window-infinite-loader";

const onRowsRendered = useInfiniteLoader({
  isRowLoaded: (index: number): boolean => {
    return loadedItems.has(index);
  },
  loadMoreRows: async (startIndex: number, stopIndex: number): Promise<void> => {
    console.log(`Loading rows ${startIndex} to ${stopIndex}`);
    const data = await api.fetchRange(startIndex, stopIndex);
    setLoadedItems(prev => {
      const updated = new Map(prev);
      data.forEach((item, i) => updated.set(startIndex + i, item));
      return updated;
    });
  },
  rowCount: 100000,
  minimumBatchSize: 50,
  threshold: 20
});
```

--------------------------------

### Implement Infinite Loading with InfiniteLoader Component

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

Demonstrates the component-based approach using a render prop pattern to provide the onRowsRendered callback to the list.

```tsx
import { InfiniteLoader } from "react-window-infinite-loader";

function Example() {
  return (
    <InfiniteLoader {...props}>
      {({ onRowsRendered }) => <List onRowsRendered={onRowsRendered} {...rest} />}
    </InfiniteLoader>
  );
}
```

--------------------------------

### InfiniteLoader Props

Source: https://github.com/bvaughn/react-window-infinite-loader/blob/master/README.md

Details the required and optional props for the InfiniteLoader component.

```APIDOC
## InfiniteLoader Props

### 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. |
```

--------------------------------

### Implement InfiniteLoader Component with Render Props

Source: https://context7.com/bvaughn/react-window-infinite-loader/llms.txt

Demonstrates using the InfiniteLoader component to wrap a FixedSizeList. It manages row state and triggers data fetching via the onRowsRendered callback provided by the render prop.

```tsx
import { useState, useCallback } from "react";
import { FixedSizeList as List } from "react-window";
import { InfiniteLoader } from "react-window-infinite-loader";

interface Item {
  id: number;
  name: string;
  status: "loaded" | "loading";
}

function InfiniteListWithComponent() {
  const [items, setItems] = useState<Map<number, Item>>(new Map());
  const rowCount = 5000;

  const isRowLoaded = useCallback(
    (index: number) => items.has(index),
    [items]
  );

  const loadMoreRows = useCallback(
    async (startIndex: number, stopIndex: number): Promise<void> => {
      const response = await fetch(`/api/items?start=${startIndex}&end=${stopIndex}`);
      const data: Item[] = await response.json();

      setItems(prev => {
        const newMap = new Map(prev);
        data.forEach((item, i) => {
          newMap.set(startIndex + i, item);
        });
        return newMap;
      });
    },
    []
  );

  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const item = items.get(index);
    return (
      <div style={{ ...style, display: "flex", alignItems: "center", padding: "0 10px" }}>
        {item ? (
          <>
            <span>{item.name}</span>
            <span style={{ marginLeft: "auto" }}>{item.status}</span>
          </>
        ) : (
          <span style={{ color: "#999" }}>Loading...</span>
        )}
      </div>
    );
  };

  return (
    <InfiniteLoader
      isRowLoaded={isRowLoaded}
      loadMoreRows={loadMoreRows}
      rowCount={rowCount}
      minimumBatchSize={25}
      threshold={15}
    >
      {({ onRowsRendered }) => (
        <List
          height={500}
          width={400}
          itemCount={rowCount}
          itemSize={50}
          onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
            onRowsRendered({ startIndex: visibleStartIndex, stopIndex: visibleStopIndex });
          }}
        >
          {Row}
        </List>
      )}
    </InfiniteLoader>
  );
}
```

--------------------------------

### Using onRowsRendered with FixedSizeList and VariableSizeList

Source: https://context7.com/bvaughn/react-window-infinite-loader/llms.txt

This snippet demonstrates how to use the `onRowsRendered` callback provided by the `useInfiniteLoader` hook with both `FixedSizeList` and `VariableSizeList` from 'react-window'. The callback should be invoked with the currently visible row indices to trigger data loading. It can use either `visibleStartIndex` and `visibleStopIndex` for precise loading or `overscanStartIndex` and `overscanStopIndex` for eager loading.

```tsx
import { FixedSizeList, VariableSizeList } from "react-window";
import { useInfiniteLoader } from "react-window-infinite-loader";

function ListWithCallback() {
  const onRowsRendered = useInfiniteLoader({
    isRowLoaded,
    loadMoreRows,
    rowCount: 1000,
  });

  return (
    <>
      {/* FixedSizeList usage */}
      <FixedSizeList
        height={300}
        width={300}
        itemCount={1000}
        itemSize={35}
        onItemsRendered={({
          overscanStartIndex,
          overscanStopIndex,
          visibleStartIndex,
          visibleStopIndex,
        }) => {
          // Use visible indices for more precise loading
          onRowsRendered({
            startIndex: visibleStartIndex,
            stopIndex: visibleStopIndex,
          });

          // Or use overscan indices for eager loading
          // onRowsRendered({
          //   startIndex: overscanStartIndex,
          //   stopIndex: overscanStopIndex,
          // });
        }}
      >
        {Row}
      </FixedSizeList>

      {/* VariableSizeList usage - same callback pattern */}
      <VariableSizeList
        height={300}
        width={300}
        itemCount={1000}
        itemSize={(index) => (index % 2 === 0 ? 50 : 35)}
        onItemsRendered={({ visibleStartIndex, visibleStopIndex }) => {
          onRowsRendered({
            startIndex: visibleStartIndex,
            stopIndex: visibleStopIndex,
          });
        }}
      >
        {Row}
      </VariableSizeList>
    </>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.