{"id":13496394,"url":"https://github.com/ankeetmaini/react-infinite-scroll-component","last_synced_at":"2025-12-28T01:35:22.012Z","repository":{"id":37706244,"uuid":"54119951","full_name":"ankeetmaini/react-infinite-scroll-component","owner":"ankeetmaini","description":"An awesome Infinite Scroll component in react.","archived":false,"fork":false,"pushed_at":"2023-10-18T13:17:11.000Z","size":2623,"stargazers_count":2972,"open_issues_count":197,"forks_count":332,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-05T08:07:23.754Z","etag":null,"topics":["component","infinite-lists","infinite-scroll","npm-package","react"],"latest_commit_sha":null,"homepage":"https://react-infinite-scroll-component.netlify.com/","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/ankeetmaini.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-17T13:28:29.000Z","updated_at":"2025-05-01T21:32:29.000Z","dependencies_parsed_at":"2024-06-18T11:14:49.568Z","dependency_job_id":null,"html_url":"https://github.com/ankeetmaini/react-infinite-scroll-component","commit_stats":{"total_commits":171,"total_committers":31,"mean_commits":5.516129032258065,"dds":0.3157894736842105,"last_synced_commit":"d5b4e5250669022db5217763afd22fb3995a505a"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Freact-infinite-scroll-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Freact-infinite-scroll-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Freact-infinite-scroll-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankeetmaini%2Freact-infinite-scroll-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankeetmaini","download_url":"https://codeload.github.com/ankeetmaini/react-infinite-scroll-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000849,"owners_count":21997441,"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":["component","infinite-lists","infinite-scroll","npm-package","react"],"created_at":"2024-07-31T19:01:47.344Z","updated_at":"2025-12-28T01:35:21.952Z","avatar_url":"https://github.com/ankeetmaini.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# react-infinite-scroll-component [![npm](https://img.shields.io/npm/dt/react-infinite-scroll-component.svg?style=flat-square)](https://www.npmjs.com/package/react-infinite-scroll-component) [![npm](https://img.shields.io/npm/v/react-infinite-scroll-component.svg?style=flat-square)](https://www.npmjs.com/package/react-infinite-scroll-component)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nA component to make all your infinite scrolling woes go away with just 4.15 kB! `Pull Down to Refresh` feature\nadded. An infinite-scroll that actually works and super-simple to integrate!\n\n## Install\n\n```bash\n  npm install --save react-infinite-scroll-component\n\n  or\n\n  yarn add react-infinite-scroll-component\n\n  // in code ES6\n  import InfiniteScroll from 'react-infinite-scroll-component';\n  // or commonjs\n  var InfiniteScroll = require('react-infinite-scroll-component');\n```\n\n## Using\n\n```jsx\n\u003cInfiniteScroll\n  dataLength={items.length} //This is important field to render the next data\n  next={fetchData}\n  hasMore={true}\n  loader={\u003ch4\u003eLoading...\u003c/h4\u003e}\n  endMessage={\n    \u003cp style={{ textAlign: 'center' }}\u003e\n      \u003cb\u003eYay! You have seen it all\u003c/b\u003e\n    \u003c/p\u003e\n  }\n  // below props only if you need pull down functionality\n  refreshFunction={this.refresh}\n  pullDownToRefresh\n  pullDownToRefreshThreshold={50}\n  pullDownToRefreshContent={\n    \u003ch3 style={{ textAlign: 'center' }}\u003e\u0026#8595; Pull down to refresh\u003c/h3\u003e\n  }\n  releaseToRefreshContent={\n    \u003ch3 style={{ textAlign: 'center' }}\u003e\u0026#8593; Release to refresh\u003c/h3\u003e\n  }\n\u003e\n  {items}\n\u003c/InfiniteScroll\u003e\n```\n\n## Using scroll on top\n\n```jsx\n\u003cdiv\n  id=\"scrollableDiv\"\n  style={{\n    height: 300,\n    overflow: 'auto',\n    display: 'flex',\n    flexDirection: 'column-reverse',\n  }}\n\u003e\n  {/*Put the scroll bar always on the bottom*/}\n  \u003cInfiniteScroll\n    dataLength={this.state.items.length}\n    next={this.fetchMoreData}\n    style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.\n    inverse={true} //\n    hasMore={true}\n    loader={\u003ch4\u003eLoading...\u003c/h4\u003e}\n    scrollableTarget=\"scrollableDiv\"\n  \u003e\n    {this.state.items.map((_, index) =\u003e (\n      \u003cdiv style={style} key={index}\u003e\n        div - #{index}\n      \u003c/div\u003e\n    ))}\n  \u003c/InfiniteScroll\u003e\n\u003c/div\u003e\n```\n\nThe `InfiniteScroll` component can be used in three ways.\n\n- Specify a value for the `height` prop if you want your **scrollable** content to have a specific height, providing scrollbars for scrolling your content and fetching more data.\n- If your **scrollable** content is being rendered within a parent element that is already providing overflow scrollbars, you can set the `scrollableTarget` prop to reference the DOM element and use it's scrollbars for fetching more data.\n- Without setting either the `height` or `scrollableTarget` props, the scroll will happen at `document.body` like _Facebook's_ timeline scroll.\n\n## docs version wise\n\n[3.0.2](docs/README-3.0.2.md)\n\n## live examples\n\n- infinite scroll (never ending) example using react (body/window scroll)\n  - [![Edit yk7637p62z](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yk7637p62z)\n- infinte scroll till 500 elements (body/window scroll)\n  - [![Edit 439v8rmqm0](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/439v8rmqm0)\n- infinite scroll in an element (div of height 400px)\n  - [![Edit w3w89k7x8](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/w3w89k7x8)\n- infinite scroll with `scrollableTarget` (a parent element which is scrollable)\n  - [![Edit r7rp40n0zm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r7rp40n0zm)\n\n## props\n\n| name                           | type                 | description                                                                                                                                                                                                                                                                                                                                   |\n| ------------------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **next**                       | function             | a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. **The data is passed as `children` to the `InfiniteScroll` component and the data should contain previous items too.** e.g. _Initial data = [1, 2, 3]_ and then next load of data should be _[1, 2, 3, 4, 5, 6]_. |\n| **hasMore**                    | boolean              | it tells the `InfiniteScroll` component on whether to call `next` function on reaching the bottom and shows an `endMessage` to the user                                                                                                                                                                                                       |\n| **children**                   | node (list)          | the data items which you need to scroll.                                                                                                                                                                                                                                                                                                      |\n| **dataLength**                 | number               | set the length of the data.This will unlock the subsequent calls to next.                                                                                                                                                                                                                                                                     |\n| **loader**                     | node                 | you can send a loader component to show while the component waits for the next load of data. e.g. `\u003ch3\u003eLoading...\u003c/h3\u003e` or any fancy loader element                                                                                                                                                                                           |\n| **scrollThreshold**            | number \u0026#124; string | A threshold value defining when `InfiniteScroll` will call `next`. Default value is `0.8`. It means the `next` will be called when user comes below 80% of the total height. If you pass threshold in pixels (`scrollThreshold=\"200px\"`), `next` will be called once you scroll at least (100% - scrollThreshold) pixels down.                |\n| **onScroll**                   | function             | a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.                                                                                                                                                               |\n| **endMessage**                 | node                 | this message is shown to the user when he has seen all the records which means he's at the bottom and `hasMore` is `false`                                                                                                                                                                                                                    |\n| **className**                  | string               | add any custom class you want                                                                                                                                                                                                                                                                                                                 |\n| **style**                      | object               | any style which you want to override                                                                                                                                                                                                                                                                                                          |\n| **height**                     | number               | optional, give only if you want to have a fixed height scrolling content                                                                                                                                                                                                                                                                      |\n| **scrollableTarget**           | node or string       | optional, reference to a (parent) DOM element that is already providing overflow scrollbars to the `InfiniteScroll` component. _You should provide the `id` of the DOM node preferably._                                                                                                                                                      |\n| **hasChildren**                | bool                 | `children` is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, if your `children` is not an array, specify this prop to tell if your items are 0 or more.                                                                                                                      |\n| **pullDownToRefresh**          | bool                 | to enable **Pull Down to Refresh** feature                                                                                                                                                                                                                                                                                                    |\n| **pullDownToRefreshContent**   | node                 | any JSX that you want to show the user, `default={\u003ch3\u003ePull down to refresh\u003c/h3\u003e}`                                                                                                                                                                                                                                                             |\n| **releaseToRefreshContent**    | node                 | any JSX that you want to show the user, `default={\u003ch3\u003eRelease to refresh\u003c/h3\u003e}`                                                                                                                                                                                                                                                               |\n| **pullDownToRefreshThreshold** | number               | minimum distance the user needs to pull down to trigger the refresh, `default=100px` , a lower value may be needed to trigger the refresh depending your users browser.                                                                                                                                                                       |\n| **refreshFunction**            | function             | this function will be called, it should return the fresh data that you want to show the user                                                                                                                                                                                                                                                  |\n| **initialScrollY**             | number               | set a scroll y position for the component to render with.                                                                                                                                                                                                                                                                                     |\n| **inverse**                    | bool                 | set infinite scroll on top                                                                                                                                                                                                                                                                                                                    |\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://ankeetmaini.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6652823?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnkeet Maini\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-ankeetmaini\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/ankeetmaini/react-infinite-scroll-component/commits?author=ankeetmaini\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/ankeetmaini/react-infinite-scroll-component/commits?author=ankeetmaini\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/ankeetmaini/react-infinite-scroll-component/pulls?q=is%3Apr+reviewed-by%3Aankeetmaini\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#maintenance-ankeetmaini\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/iamdarshshah\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25670841?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDarsh Shah\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-iamdarshshah\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://allcontributors.org) specification. Contributions of any kind are welcome!\n\n## LICENSE\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankeetmaini%2Freact-infinite-scroll-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankeetmaini%2Freact-infinite-scroll-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankeetmaini%2Freact-infinite-scroll-component/lists"}