{"id":13567821,"url":"https://github.com/jaredpalmer/react-simple-infinite-scroll","last_synced_at":"2025-04-09T11:11:51.975Z","repository":{"id":21479025,"uuid":"92992266","full_name":"jaredpalmer/react-simple-infinite-scroll","owner":"jaredpalmer","description":"A brutally simple react infinite scroll component","archived":false,"fork":false,"pushed_at":"2022-12-08T19:07:35.000Z","size":309,"stargazers_count":141,"open_issues_count":19,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-13T23:54:14.988Z","etag":null,"topics":["infinite-scroll","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/jaredpalmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-31T21:59:05.000Z","updated_at":"2023-07-12T01:39:45.000Z","dependencies_parsed_at":"2022-08-07T10:00:39.344Z","dependency_job_id":null,"html_url":"https://github.com/jaredpalmer/react-simple-infinite-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Freact-simple-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Freact-simple-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Freact-simple-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Freact-simple-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredpalmer","download_url":"https://codeload.github.com/jaredpalmer/react-simple-infinite-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027411,"owners_count":21035594,"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":["infinite-scroll","react","typescript"],"created_at":"2024-08-01T13:02:44.807Z","updated_at":"2025-04-09T11:11:51.949Z","avatar_url":"https://github.com/jaredpalmer.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Simple Infinite Scroll\n\nA brutally simple infinite scroll helper component.\n\n## Install\n\n```bash\nnpm install react-simple-infinite-scroll --save\n```\n\n## Usage\n\nThis component uses a \"sentinel\" `div` (with a React ref) that calls `getBoundingClientRect()` to measure its position and fire off a callback when it becomes visible again. Note: this package eventually becomes somewhat inefficient on very very very large lists because it keeps adding nodes to the DOM. However, this package is extremely valuable for situations when a windowing technique is not possible and when a user is going to realistically scroll a few hundred rows (and _not_ thousands of rows). \n\n### Why not use windowing (`react-virtualized`)?\n\nIf you can, you probably should. However, windowing only works when you know the total number of items in the result set ahead of time. This isn't always possible. For example, let's say you have a MongoDB database where you cannot efficiently return the total number of documents in a given query. All your API returns is a cursor (so you can know is if there is another page or not). While this would prevent you from using windowing/`react-virtualized`, `react-simple-infinite-scroll` will work just fine.\n\n### The Gist\n\n```jsx\n\u003cInfiniteScroll\n  throttle={100}\n  threshold={300}\n  isLoading={this.state.isLoading}\n  hasMore={!!this.state.cursor}\n  onLoadMore={this.loadMore}\n\u003e\n  {this.state.myArrayOfItems.map(item =\u003e \u003cdiv\u003e{/* ... */}\u003c/div\u003e)}\n\u003c/InfiniteScroll\u003e\n```\n\n```jsx\n\u003cInfiniteScroll\n  throttle={100}\n  threshold={300}\n  isLoading={this.state.isLoading}\n  hasMore={!!this.state.cursor}\n  onLoadMore={this.loadMore}\n  render={({ sentinel }) =\u003e (\n    \u003csection\u003e\n      {this.state.myArrayOfItems.map(item =\u003e \u003cdiv\u003e{/* ... */}\u003c/div\u003e)}\n      {sentinel}\n    \u003c/section\u003e\n  )}\n/\u003e\n```\n\n```jsx\n// Small react-redux pseudocode\n// `storeData` is information extracted from the store\nconst MyComponent = ({ sentinel, storeData }) =\u003e (\n  \u003csection\u003e\n    {storeData.entities}\n    {sentinel}\n  \u003c/section\u003e\n);\n\nconst ConnectedComponent = connect(/* ... */)(MyComponent);\n\n\u003cInfiniteScroll\n  throttle={100}\n  threshold={300}\n  isLoading={storeData.isLoading}\n  hasMore={storeData.hasMore}\n  onLoadMore={() =\u003e boundActions.fetchMoreEntities(storeData.cursor)}\n  component={ConnectedComponent}\n/\u003e\n```\n\n### Full Example\n\n```jsx\nimport React from 'react'\nimport { InfiniteScroll } from 'react-simple-infinite-scroll'\n\nexport class MyInfiniteScrollExample extends React.Component {\n  state = {\n    items: [],\n    isLoading: true,\n    cursor: 0\n  }\n\n  componentDidMount() {\n    // do some paginated fetch\n    this.loadMore()\n  }\n\n  loadMore = () =\u003e {\n    this.setState({ isLoading: true, error: undefined })\n    fetch(`https://api.example.com/v1/items?from=${this.state.cursor}`)\n      .then(res =\u003e res.json())\n      .then(\n        res =\u003e {\n          this.setState(state =\u003e ({\n            items: [...state.items, ...res.items],\n            cursor: res.cursor,\n            isLoading: false\n          }))\n        },\n        error =\u003e {\n          this.setState({ isLoading: false, error })\n        }\n    )\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cInfiniteScroll\n          throttle={100}\n          threshold={300}\n          isLoading={this.state.isLoading}\n          hasMore={!!this.state.cursor}\n          onLoadMore={this.loadMore}\n        \u003e\n          {this.state.items.length \u003e 0\n            ? this.state.items.map(item =\u003e (\n                \u003cMyListItem key={item.id} title={item.title} /\u003e\n              ))\n            : null}\n        \u003c/InfiniteScroll\u003e\n        {this.state.isLoading \u0026\u0026 (\n          \u003cMyLoadingState /\u003e\n        )}\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n\n## API Reference \n\n### Props\n\n#### `hasMore: boolean`\n\n**Required**\n\nSpecifies if there are more entities to load.\n\n#### `isLoading: boolean`\n\n**Required**\n\nWhen `true`, `onLoadMore()` will not be executed on scroll.\n\n#### `onLoadMore: () =\u003e void`\n\n**Required**\n\nCalled when the user has scrolled all the way to the end. This happens when the `sentinel` has reached the `threshold`.\n\n#### `threshold?: number`\n\nScroll threshold. Number of pixels before the `sentinel` reaches the viewport to trigger `onLoadMore()`.\n\n#### `throttle?: number = 64`\n\nDefaults to `64`. Scroll handler will be executed at most once per the number of milliseconds specified.\n\n**Warning:** Making this number closer to zero can decrease performance due to a force reflow caused by `getBoundingClientRect()`, see more properties that can cause this issue in [this gist by Paul Irish](https://gist.github.com/paulirish/5d52fb081b3570c81e3a).\n\n#### `render?: (props: ScrollProps) =\u003e React.ReactNode`\n\nCallback used for convenient inline rendering and wrapping. Arguments passed `Object: { sentinel, children }`. Use this if you have a more complex layout where the `sentinel` needs to be injected.\n\n**Warning:** The `sentinel` must be rendered (injected into the DOM) in order for this library to work properly, failing to do so will result in errors and unexpected side effects.\n\n#### `component?: React.ComponentType\u003cScrollProps\u003e`\n\nReact component. Similar to the `render()` prop, this component will receive `Object: { sentinel, children }` as props. **Note** that `render()` prop has precedence over this property, meaning that if both are present, `component` will not be rendered.\n\n**Warning:** The `sentinel` must be rendered (injected into the DOM) in order for this library to work properly, failing to do so will result in errors and unexpected side effects.\n\n## Alternatives\n\n- [`brigade/react-waypoint`](https://github.com/brigade/react-waypoint)\n\n## Author\n\n* Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)\n\n## Contributors\n\n\u003c!-- Contributors START\njared_palmer jaredpalmer https://twitter.com/jaredpalmer/ author contributor\npablo_garcia pgarciacamou https://twitter.com/pgarciacamou/ contributor\nContributors END --\u003e\n\u003c!-- Contributors table START --\u003e\n| \u003cimg src=\"https://avatars.githubusercontent.com/jaredpalmer?s=100\" width=\"100\" alt=\"jared palmer\" /\u003e\u003cbr /\u003e[\u003csub\u003ejared palmer\u003c/sub\u003e](https://twitter.com/jaredpalmer/)\u003cbr /\u003e💻 📖 💡 | \u003cimg src=\"https://avatars.githubusercontent.com/pgarciacamou?s=100\" width=\"100\" alt=\"pablo garcia\" /\u003e\u003cbr /\u003e[\u003csub\u003epablo garcia\u003c/sub\u003e](https://twitter.com/pgarciacamou/)\u003cbr /\u003e💻 📖 💡 |\n| :---: | :---: |\n\u003c!-- Contributors table END --\u003e\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Freact-simple-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredpalmer%2Freact-simple-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Freact-simple-infinite-scroll/lists"}