{"id":19791645,"url":"https://github.com/solidstategroup/react-virtualized-infinite-scroll","last_synced_at":"2025-05-01T01:32:34.638Z","repository":{"id":57347442,"uuid":"69860639","full_name":"SolidStateGroup/react-virtualized-infinite-scroll","owner":"SolidStateGroup","description":"Infinite scroll list React component","archived":false,"fork":false,"pushed_at":"2017-03-21T12:09:54.000Z","size":77,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-14T15:50:07.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SolidStateGroup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-03T10:22:16.000Z","updated_at":"2021-05-13T13:23:29.000Z","dependencies_parsed_at":"2022-08-28T04:00:28.365Z","dependency_job_id":null,"html_url":"https://github.com/SolidStateGroup/react-virtualized-infinite-scroll","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidStateGroup%2Freact-virtualized-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidStateGroup%2Freact-virtualized-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidStateGroup%2Freact-virtualized-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidStateGroup%2Freact-virtualized-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SolidStateGroup","download_url":"https://codeload.github.com/SolidStateGroup/react-virtualized-infinite-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251808667,"owners_count":21647323,"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-11-12T07:04:13.957Z","updated_at":"2025-05-01T01:32:34.250Z","avatar_url":"https://github.com/SolidStateGroup.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Virtualized Infinite Scroll Component\n\nA React component that provides you with an infinite scrolling list that be used in either direction.\n\n## Install\n```\n$ npm install react-virtualized-infinite-scroll --save\n```\n\n## Usage\n\n```\nimport InfiniteScroll from 'react-virtualized-infinite-scroll';\n\n...\n\nloadMore = () =\u003e {\n    // Set state to loading data\n    this.setState({\n        isLoading: true,\n    });\n\n    // @TODO Perform asychronous load of data\n}\n\n// Optional function to return dynamic row height\nrowHeight = ({ index }) =\u003e {\n    return index \u003c this.state.data.length ? this.state.data[index].height : 40;\n}\n\n// Example function for adding data to the bottom of the list in reverse mode\naddToBottom = () =\u003e {\n    let data = this.state.data.slice(0);\n    data.unshift({ key: data.length, height: this.getRandomHeight() });\n    this.setState({ data });\n    if (this.infiniteScroll) {\n      this.infiniteScroll.adjustScrollPos(this.state.randomRowHeights ? data.height * -1 : -40);\n    }\n}\n\nrenderRow (row) {\n    return (\n        \u003cdiv className=\".FlexTable__row\" key={row.key}\u003e\n            Row {row.key + 1}\n        \u003c/div\u003e\n    );\n}\n\nrender () {\n    return (\n        \u003cdiv\u003e\n            \u003cInfiniteScroll\n                loadMore={this.loadMore}\n                renderRow={this.renderRow}\n                rowHeight={this.rowHeight}\n                threshold={50}\n                data={this.state.data}\n                isLoading={this.state.isLoading}\n                renderLoading={(\n                    \u003cdiv style={{ height: 40 }}\u003e\n                        Loading...\n                    \u003c/div\u003e\n                )}\n                containerHeight={200}\n                ref={(infiniteScroll) =\u003e this.infiniteScroll = infiniteScroll}\n                scrollRef={(virtualScroll) =\u003e this.virtualScroll = virtualScroll}\n                reverse={this.props.reverse}\n            /\u003e\n        \u003c/div\u003e\n    );\n}\n\n```\n\n### Prop Types\n| Property | Type | Required? | Description |\n|:---|:---|:---:|:---|\n| loadMore | Function | ✓ | Callback used for loading more data |\n| renderRow | Function | ✓ | Used to render each row |\n| rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` |\n| threshold | Number | ✓ | How many rows before the bottom (or top in reverse mode) to request more data |\n| isLoading | Bool |  | While true a loading item is shown at the bottom (or top in reverse mode). Useful while loading more data |\n| scrollToRow | Number |  | Row index to ensure visible (by forcefully scrolling if necessary) |\n| renderLoading | Object |  | Render a custom loading item |\n| data | Array |  | Data array |\n| containerHeight | Number |  | Force a height on the entire list component. Default is to auto fill available space |\n| reverse | Bool |  | Reverse scroll direction. Defaults to `false` |\n| scrollRef | Function |  | Callback used to give back reference to underlying virtual scroll component for finer control |\n\n## Development\nShould you wish to develop this module further start by cloning this repository\n\n### Run Dev - Run hot reloading node server\n```\n$ npm start\n```\n\n### Run Prod - Build, deploy, minify npm module\n```\n$ npm run prod\n```\n\n### Testing the module\nSee ```InfiniteScrollExample.js```, this component imports your developed module, if you wish to point to production then uncomment the other import line for InfiniteScroll\n\n# Getting Help\nIf you encounter a bug or feature request we would like to hear about it. Before you submit an issue please search existing issues in order to prevent duplicates. \n\n# Contributing\nFor more information about contributing PRs, please see our \u003ca href=\"CONTRIBUTING.md\"\u003eContribution Guidelines\u003c/a\u003e.\n\n\n# Get in touch\nIf you have any questions about our projects you can email \u003ca href=\"mailto:projects@solidstategroup.com\"\u003eprojects@solidstategroup.com\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidstategroup%2Freact-virtualized-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidstategroup%2Freact-virtualized-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidstategroup%2Freact-virtualized-infinite-scroll/lists"}