{"id":13450540,"url":"https://github.com/robcalcroft/react-use-infinite-loader","last_synced_at":"2025-04-10T19:50:33.853Z","repository":{"id":46558544,"uuid":"257845896","full_name":"robcalcroft/react-use-infinite-loader","owner":"robcalcroft","description":":infinity: :page_with_curl: :hourglass_flowing_sand: Super lightweight infinite loading hook for React apps","archived":false,"fork":false,"pushed_at":"2021-11-12T21:46:13.000Z","size":1927,"stargazers_count":15,"open_issues_count":2,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-13T13:44:17.730Z","etag":null,"topics":["hooks","infinite-scroll","react"],"latest_commit_sha":null,"homepage":"https://react-use-infinite-loader.netlify.app","language":"JavaScript","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/robcalcroft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2020-04-22T08:54:55.000Z","updated_at":"2022-11-23T13:54:31.000Z","dependencies_parsed_at":"2022-09-11T11:11:39.982Z","dependency_job_id":null,"html_url":"https://github.com/robcalcroft/react-use-infinite-loader","commit_stats":null,"previous_names":["curationcorp/react-use-infinite-loader"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-use-infinite-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-use-infinite-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-use-infinite-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-use-infinite-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robcalcroft","download_url":"https://codeload.github.com/robcalcroft/react-use-infinite-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248283003,"owners_count":21077755,"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":["hooks","infinite-scroll","react"],"created_at":"2024-07-31T07:00:35.817Z","updated_at":"2025-04-10T19:50:33.828Z","avatar_url":"https://github.com/robcalcroft.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# react-use-infinite-loader :infinity: :page_with_curl: :hourglass_flowing_sand:\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/8f5a22a2-92be-4cc0-ab7b-ae58ff82706a/deploy-status)](https://app.netlify.com/sites/react-use-infinite-loader/deploys) ![Run puppeteer tests on the example code](https://github.com/CurationCorp/react-use-infinite-loader/workflows/Run%20puppeteer%20tests%20on%20the%20example%20code/badge.svg?branch=master) [![npm version](https://badge.fury.io/js/react-use-infinite-loader.svg)](https://badge.fury.io/js/react-use-infinite-loader)\n\n\u003e Super lightweight infinite loading hook for React apps\n\n`react-use-infinite-loader` uses the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to provide a performant solution to infinite scrolling that doesn't involve scroll event listeners.\n\n:warning: Some older browsers [may not support](https://caniuse.com/#feat=intersectionobserver) the `IntersectionObserver` API, however you can easily [polyfill the functionality with this](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).\n\nAs the name suggests `react-use-infinite-loader` uses React Hooks, so you need to be using React function components to use this library.\n\n## Usage\n\u003e See [`example/`](example/Example.jsx) for a full example (recommended), run it locally with `yarn start`. [Also view it in the browser](https://react-use-infinite-loader.netlify.app)\n\nInstall with\n```bash\nyarn add react-use-infinite-loader\n```\nAdd to your app\n```javascript\nimport useInfiniteLoader from 'react-use-infinite-loader';\n```\nImplement the hook. Ensure that the initial content page size flows off the page so that the next page isn't instantly fetched\n```javascript\nconst [canLoadMore, setCanLoadMore] = React.useState(true);\nconst [data, setData] = React.useState([]);\nconst loadMore = React.useCallback((page) =\u003e {\n  loadFromAPI(page).then(response =\u003e {\n    setCanLoadMore(response.canLoadMore);\n    setData(currentData =\u003e [...currentData, ...response.data]);\n  });\n});\nconst { loaderRef } = useInfiniteLoader({ loadMore, canLoadMore });\n```\nGive the `loaderRef` that's returned from the hook to a `div` that sits directly below your rendered content list. Give it a classname that you'll use in the next step.\n```javascript\nreturn (\n  \u003c\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n    {items.map(item =\u003e \u003cdiv\u003e{item}\u003c/div\u003e)}\n    \u003cdiv ref={loaderRef} className=\"loaderRef\" /\u003e\n  \u003c/\u003e\n);\n```\nAdd the following CSS to your apps to allow the observer to see the div and know to load more data. Note that if you **always** have a DOM node with at least 1px height and width below the `loaderRef` div then you **don't** need to add this CSS. A common example where the CSS isn't required would be `{canLoadMore \u0026\u0026 \u003cdiv\u003eLoading page {page + 1}\u003c/div\u003e}`.\n```css\n/* You can change the name here and in your JSX if you want to */\n.loaderRef {\n  width: 1px;\n  height: 1px;\n  position: absolute;\n}\n```\n\n## API Reference\n\n### `useInfiniteLoader` arguments object\n\n| Property | Default value | Description |\n| - | - | - |\n| loadMore | **required** | Invoked when the user scrolls into the observable viewport + its rootMargin; read about rootMargin and thresholds [here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options). |\n| canLoadMore | `false` | Tells useInfiniteLoader whether to run `loadMore` when the observer is triggered, this is usually set dynamically. |\n| rootMargin | `\"100px 0px 0px 0px\"` | [Read about `rootMargin` here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options). |\n| threshold | `0` | [Read about `threshold` here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options). |\n| initialise  | `true` | Used for if your data fetching library fetches page 0 and renders it when the component loads, to use this just have a state flag that you set to false once the initial load from your data fetching lib has happened. |\n| startFromPage | `0` | Used if you already load page 0 on mount, you can tell useInfiniteLoader what page to begin loading more from. |\n| debug | `false` | Prints some helpful messages about what useInfiniteLoader is doing. |\n\n### `useInfiniteLoader` result object\n\n| Property | Description |\n| - | - |\n| `loaderRef` | A [React ref](https://reactjs.org/docs/hooks-reference.html#useref) that you must pass to an element via `ref={loaderRef}`, this element must sit directly below your list of items that you're loading  |\n| `page` | The current page that `useInfiniteLoader` has loaded |\n| `resetPage` | A function that resets the current page to `startFromPage` (default `0`). This is useful if you change the context of the page but the component instance is the same |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobcalcroft%2Freact-use-infinite-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobcalcroft%2Freact-use-infinite-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobcalcroft%2Freact-use-infinite-loader/lists"}