{"id":15070117,"url":"https://github.com/frinyvonnick/react-simple-infinite-loading","last_synced_at":"2025-04-10T17:33:51.692Z","repository":{"id":35079323,"uuid":"203947335","full_name":"frinyvonnick/react-simple-infinite-loading","owner":"frinyvonnick","description":"A list that infinitely loads content as user scrolls down in React","archived":false,"fork":false,"pushed_at":"2022-12-11T20:20:30.000Z","size":3289,"stargazers_count":59,"open_issues_count":40,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:21:31.072Z","etag":null,"topics":["infinite-scroll","javascript","react","ui-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-simple-infinite-loading","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frinyvonnick.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["frinyvonnick"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-08-23T07:28:34.000Z","updated_at":"2023-07-04T05:10:27.000Z","dependencies_parsed_at":"2023-01-15T13:30:28.442Z","dependency_job_id":null,"html_url":"https://github.com/frinyvonnick/react-simple-infinite-loading","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frinyvonnick%2Freact-simple-infinite-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frinyvonnick%2Freact-simple-infinite-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frinyvonnick%2Freact-simple-infinite-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frinyvonnick%2Freact-simple-infinite-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frinyvonnick","download_url":"https://codeload.github.com/frinyvonnick/react-simple-infinite-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262020,"owners_count":21074229,"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","javascript","react","ui-components"],"created_at":"2024-09-25T01:48:13.456Z","updated_at":"2025-04-10T17:33:51.666Z","avatar_url":"https://github.com/frinyvonnick.png","language":"JavaScript","funding_links":["https://github.com/sponsors/frinyvonnick"],"categories":[],"sub_categories":[],"readme":"# react-simple-infinite-loading\n\n[![NPM](https://img.shields.io/npm/v/react-simple-infinite-loading.svg)](https://www.npmjs.com/package/react-simple-infinite-loading) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![gitmoji-changelog](https://img.shields.io/badge/Changelog-gitmoji-brightgreen.svg)](https://github.com/frinyvonnick/gitmoji-changelog)\n\n## Why?\n\nI wrote an article about [creating an infinite loading list with React and GraphQL](https://dev.to/yvonnickfrin/create-an-infinite-loading-list-with-react-and-graphql-19hh). Someone pointed out the React implementation of the list was a bit complex. I figure out it was possible to write an abstraction for this particular case. Here it is!\n\nThis component aims to stay easy to use. If your use case needs more options I recommend using directly awesome libraries from [Brian Vaughn](https://github.com/bvaughn) listed in dependencies section.\n\n## Demo\n\nYou can find a demo [here](https://codesandbox.io/s/magical-shockley-vhkz8).\n\n## Install\n\n```bash\nnpm install --save react-simple-infinite-loading\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\n\nimport InfiniteLoading from 'react-simple-infinite-loading'\n\nfunction Example({ items, fetchMore, hasMore }) {\n  return (\n    \u003cdiv style={{ width: 300, height: 300 }}\u003e\n      \u003cInfiniteLoading\n        hasMoreItems={hasMore}\n        itemHeight={40}\n        loadMoreItems={fetchMore}\n      \u003e\n        {items.map(item =\u003e \u003cdiv key={item}\u003e{item}\u003c/div\u003e)}\n      \u003c/InfiniteLoading\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n[Link to example](/example/README.md)\n\n## Dependencies\n\n`react-simple-infinite-loading` has only three dependencies:\n\n- [react-window](https://github.com/bvaughn/react-window) is made to display efficiently large lists. It only creates components for the visible elements and reuse nodes.\n- [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader/) is a HOC that loads elements just-in-time as user scrolls down the list\n- [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer/) helps you displaying your list so it fits the space available in its parent container.\n\n## Properties\n\n| property name | required | type     | description                                                                                                                                                                                               |\n| ------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children      | yes      | function | The children function should return the jsx for an item of the list. An object is passed as parameter containing `item`, `index`, `style`. _You must pass the style to top-level tag of your item's jsx_. |\n| items         | yes      | array    | An array of elements. Any type of elements is accepted.                                                                                                                                                   |\n| itemHeight    | yes      | number   | The height of an item. All items should have the same height.                                                                                                                                             |\n| itemsCount    | no       | number   | The count of items to be loaded, if known. Prevents the scrollbar from changing its size as the items are being loaded.                                                                             |\n| hasMoreItems  | no       | boolean  | A boolean that determines if there are still items to load using `loadMoreItems` function.                                                                                                                |\n| loadMoreItems | no       | function | A function that will be called each time the list need to load more items.                                                                                                                                |\n| placeholder   | no       | node     | Any render-able value like strings or React.Nodes to be displayed while `children` is loading                                                                                                             |\n| customScrollbar   | no       | boolean     | A boolean that determines if [react-custom-scrollbars](https://github.com/malte-wessel/react-custom-scrollbars) is used instead of native one                                                      |\n| elementClassName   | no       | string     | A React className prop that will be applied to every child container\n| ref   | no       | ref or function     | A ref or a callback ref to get component instance so you can call instance's methods (see [Methods section](/README.md#methods))                                                     |\n\n## Methods\n\n**scrollTo(scrollOffset: number): void**\n\nsee [FixedSizeList](https://react-window.now.sh/#/api/FixedSizeList) methods section.\n\n**scrollToItem(index: number, align: string = \"auto\"): void**\n\nsee [FixedSizeList](https://react-window.now.sh/#/api/FixedSizeList) methods section.\n\n**resetloadMoreItemsCache(): void**\n\nClear previously loaded items from cache.\n\nexample\n```jsx\nimport React from 'react'\n\nimport InfiniteLoading from 'react-simple-infinite-loading'\n\nfunction Example({ items, fetchMore, hasMore }) {\n  const ref = React.useRef()\n  const scrollToTop = () =\u003e {\n    if (ref.current) {\n      ref.current.scrollTo(0)\n    }\n  }\n  const scrollTo50 = () =\u003e {\n    if (ref.current) {\n      ref.current.scrollToItem(50)\n    }\n  }\n  const resetCache = () =\u003e {\n    if (ref.current) {\n      ref.current.resetloadMoreItemsCache()\n    }\n  }\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={scrollToTop}\u003eScroll to top\u003c/button\u003e\n      \u003cbutton onClick={scrollTo50}\u003eScroll to 50\u003c/button\u003e\n      \u003cbutton onClick={resetCache}\u003eReset cache\u003c/button\u003e\n      \u003cdiv style={{ width: 300, height: 300 }}\u003e\n        \u003cInfiniteLoading\n          hasMoreItems={hasMore}\n          itemHeight={40}\n          loadMoreItems={fetchMore}\n          ref={ref}\n        \u003e\n          {items.map(item =\u003e \u003cdiv key={item}\u003e{item}\u003c/div\u003e)}\n        \u003c/InfiniteLoading\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## License\n\nApache-2.0 © [frinyvonnick](https://github.com/frinyvonnick)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\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://yvonnickfrin.dev\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/13099512?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYvonnick FRIN\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=frinyvonnick\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/AugustoConti\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8778672?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAugusto\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=AugustoConti\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://henry-ns.github.io/portfolio/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/16365204?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHenrique Martins\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=henry-ns\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Taranys\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/4621525?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYoann Prot\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=Taranys\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Orodan\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/7422824?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJimmy Kasprzak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=Orodan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://about.me/hallackerem\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6216601?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKerem Hallaç\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=keremh\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://timrybicki.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/39889198?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTim\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=trybick\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=trybick\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gVirtu\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/15658199?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGiancarlo França\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=gVirtu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gilesbradshaw\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/597115?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGiles\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/frinyvonnick/react-simple-infinite-loading/commits?author=gilesbradshaw\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrinyvonnick%2Freact-simple-infinite-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrinyvonnick%2Freact-simple-infinite-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrinyvonnick%2Freact-simple-infinite-loading/lists"}