{"library":"react-window-infinite-loader","title":"React Window Infinite Loader","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-window-infinite-loader"],"cli":null},"imports":["import { useInfiniteLoader } from 'react-window-infinite-loader'","import { InfiniteLoader } from 'react-window-infinite-loader'","import type { InfiniteLoaderProps } from 'react-window-infinite-loader'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useInfiniteLoader } from 'react-window-infinite-loader';\nimport { FixedSizeList } from 'react-window';\nimport React, { useState, useCallback } from 'react';\n\nconst Row = ({ index, style, isLoaded }) => (\n  <div style={style}>\n    {isLoaded ? `Row ${index}` : `Loading row ${index}...`}\n  </div>\n);\n\nconst ExampleList = ({ itemCount, isRowLoaded, loadMoreRows }) => {\n  const [items, setItems] = useState(Array(itemCount).fill(false));\n\n  const infiniteLoaderProps = {\n    isRowLoaded,\n    loadMoreRows,\n    itemCount,\n    threshold: 5,\n    minimumBatchSize: 10\n  };\n\n  const onRowsRendered = useInfiniteLoader(infiniteLoaderProps);\n\n  return (\n    <FixedSizeList\n      height={300}\n      itemCount={itemCount}\n      itemSize={50}\n      width={500}\n      onRowsRendered={onRowsRendered}\n    >\n      {({ index, style }) => (\n        <Row index={index} style={style} isLoaded={isRowLoaded({ index })} />\n      )}\n    </FixedSizeList>\n  );\n};\n\nfunction App() {\n  const ROW_COUNT = 1000;\n  const isItemLoaded = ({ index }) => index < loadedItems.length;\n  const [loadedItems, setLoadedItems] = useState(Array(50).fill(true));\n\n  const loadMore = useCallback(async (startIndex, stopIndex) => {\n    console.log(`Loading rows from ${startIndex} to ${stopIndex}`);\n    // Simulate API call\n    await new Promise(resolve => setTimeout(resolve, 1000));\n\n    setLoadedItems(prev => {\n      const newItems = [...prev];\n      for (let i = startIndex; i <= stopIndex; i++) {\n        if (!newItems[i]) {\n          newItems[i] = true;\n        }\n      }\n      return newItems;\n    });\n  }, []);\n\n  return (\n    <ExampleList\n      itemCount={ROW_COUNT}\n      isRowLoaded={isItemLoaded}\n      loadMoreRows={loadMore}\n    />\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}