{"id":13725576,"url":"https://github.com/bvaughn/react-window-infinite-loader","last_synced_at":"2025-05-13T17:14:35.156Z","repository":{"id":37706576,"uuid":"161093150","full_name":"bvaughn/react-window-infinite-loader","owner":"bvaughn","description":"InfiniteLoader component inspired by react-virtualized but for use with react-window","archived":false,"fork":false,"pushed_at":"2025-01-25T02:41:22.000Z","size":121,"stargazers_count":939,"open_issues_count":2,"forks_count":46,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-11T13:39:43.837Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bvaughn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"bvaughn","patreon":null,"open_collective":"brianvaughn","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"bvaughn","custom":null}},"created_at":"2018-12-10T00:00:06.000Z","updated_at":"2025-05-08T13:19:03.000Z","dependencies_parsed_at":"2025-02-06T16:01:10.040Z","dependency_job_id":"f50ad7aa-5d3c-4cc6-ac9a-f6ed94a5f254","html_url":"https://github.com/bvaughn/react-window-infinite-loader","commit_stats":{"total_commits":27,"total_committers":11,"mean_commits":"2.4545454545454546","dds":0.7037037037037037,"last_synced_commit":"d352f2a47a8baf930d646130b5e74f48899666e7"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window-infinite-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window-infinite-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window-infinite-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-window-infinite-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bvaughn","download_url":"https://codeload.github.com/bvaughn/react-window-infinite-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253774003,"owners_count":21962197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:02:27.888Z","updated_at":"2025-05-13T17:14:30.141Z","avatar_url":"https://github.com/bvaughn.png","language":"JavaScript","funding_links":["https://github.com/sponsors/bvaughn","https://opencollective.com/brianvaughn","https://buymeacoffee.com/bvaughn","https://github.com/sponsors/bvaughn/"],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-window-infinite-loader\n\n\u003e InfiniteLoader component inspired by react-virtualized but for use with [react-window](https://github.com/bvaughn/react-window/)\n\n### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)\n\n## Install\n\n```bash\n# Yarn\nyarn add react-window-infinite-loader\n\n# NPM\nnpm install --save react-window-infinite-loader\n```\n\n## Documentation\n\n| Name | Type | Description |\n| --- | --- | --- |\n| `children` | `({ onItemsRendered: Function, ref: React$Ref }) =\u003e React$Node` | Render prop. See below for example usage. | \n| `isItemLoaded` | `(index: number) =\u003e boolean` | Function responsible for tracking the loaded state of each item. |\n| `itemCount` | `number` | Number of rows in list; can be arbitrary high number if actual number is unknown. |\n| `loadMoreItems` | `(startIndex: number, stopIndex: number) =\u003e Promise\u003cvoid\u003e` | Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading. |\n| `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. |\n| `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. |\n\n## Example usage\n\nThe snippet below shows a basic example of how the `InfiniteLoader` can be used to wrap either a `FixedSizeList` or `VariableSizeList` from `react-window`.\n\n```js\n// This value is arbitrary.\n// If you know the size of your remote data, you can provide a real value.\n// You can also increase this value gradually (as shown in the example below).\nconst itemCount = 1000;\n\n\u003cInfiniteLoader\n  isItemLoaded={isItemLoaded}\n  itemCount={itemCount}\n  loadMoreItems={loadMoreItems}\n\u003e\n  {({ onItemsRendered, ref }) =\u003e (\n    \u003cFixedSizeList\n      itemCount={itemCount}\n      onItemsRendered={onItemsRendered}\n      ref={ref}\n      {...otherListProps}\n    /\u003e\n  )}\n\u003c/InfiniteLoader\u003e\n```\n\n[Try it on Code Sandbox](https://codesandbox.io/s/5wqo7z2np4)\n\n##  Creating an infinite loading list\n\nThe `InfiniteLoader` component was created to help break large data sets down into chunks that could be just-in-time loaded as they were scrolled into view.\nIt can also be used to create infinite loading lists (e.g. Facebook or Twitter).\nHere's a basic example of how you might implement that:\n\n```jsx\nfunction ExampleWrapper({\n  // Are there more items to load?\n  // (This information comes from the most recent API request.)\n  hasNextPage,\n\n  // Are we currently loading a page of items?\n  // (This may be an in-flight flag in your Redux store for example.)\n  isNextPageLoading,\n\n  // Array of items loaded so far.\n  items,\n\n  // Callback function responsible for loading the next page of items.\n  loadNextPage\n}) {\n  // If there are more items to be loaded then add an extra row to hold a loading indicator.\n  const itemCount = hasNextPage ? items.length + 1 : items.length;\n\n  // Only load 1 page of items at a time.\n  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.\n  const loadMoreItems = isNextPageLoading ? () =\u003e {} : loadNextPage;\n\n  // Every row is loaded except for our loading indicator row.\n  const isItemLoaded = index =\u003e !hasNextPage || index \u003c items.length;\n\n  // Render an item or a loading indicator.\n  const Item = ({ index, style }) =\u003e {\n    let content;\n    if (!isItemLoaded(index)) {\n      content = \"Loading...\";\n    } else {\n      content = items[index].name;\n    }\n\n    return \u003cdiv style={style}\u003e{content}\u003c/div\u003e;\n  };\n\n  return (\n    \u003cInfiniteLoader\n      isItemLoaded={isItemLoaded}\n      itemCount={itemCount}\n      loadMoreItems={loadMoreItems}\n    \u003e\n      {({ onItemsRendered, ref }) =\u003e (\n        \u003cFixedSizeList\n          itemCount={itemCount}\n          onItemsRendered={onItemsRendered}\n          ref={ref}\n          {...props}\n        \u003e\n          {Item}\n        \u003c/FixedSizeList\u003e\n      )}\n    \u003c/InfiniteLoader\u003e\n  );\n}\n```\n\n[Try it on Code Sandbox](https://codesandbox.io/s/x70ly749rq)\n\n## Advanced usage\n\nSome use cases require cached items to be reset. For example, after a list has been sorted, previously cached items may be invalid. You can let `InfiniteLoader` know that it needs to reload cached items by calling the `resetloadMoreItemsCache` method.\n\n```jsx\nfunction ExampleWrapper({\n  // ...\n  sortOrder,\n}) {\n  // We create a reference for the InfiniteLoader\n  const infiniteLoaderRef = useRef(null);\n  const hasMountedRef = useRef(false);\n\n  // Each time the sort prop changed we called the method resetloadMoreItemsCache to clear the cache\n  useEffect(() =\u003e {\n    // We only need to reset cached items when \"sortOrder\" changes.\n    // This effect will run on mount too; there's no need to reset in that case.\n    if (hasMountedRef.current) {\n      if (infiniteLoaderRef.current) {\n        infiniteLoaderRef.current.resetloadMoreItemsCache();\n      }\n    }\n    hasMountedRef.current = true;\n  }, [sortOrder]);\n  \n  // ...\n\n  // We passed down the ref to the InfiniteLoader component\n  return (\n    \u003cInfiniteLoader\n      ref={infiniteLoaderRef}\n      isItemLoaded={isItemLoaded}\n      itemCount={itemCount}\n      loadMoreItems={loadMoreItems}\n    \u003e\n      {({ onItemsRendered, ref }) =\u003e (\n        // ...\n      )}\n    \u003c/InfiniteLoader\u003e\n  );\n}\n```\n\n[Try it on Code Sandbox](https://codesandbox.io/embed/lucid-tree-7wnrq)\n\n## License\n\nMIT © [bvaughn](https://github.com/bvaughn)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-window-infinite-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbvaughn%2Freact-window-infinite-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-window-infinite-loader/lists"}