- \n {items.map((item) => (\n
- {item.name} \n ))}\n
\n {isLoading\n ? 'Loading more...'\n : canFetchMore(nextCursor)\n ? 'Load More'\n : 'Nothing more to load'}\n
\n \n );\n};\n```\n\n### React Query\n\n```tsx\nimport React from 'react';\nimport { useInfiniteQuery } from 'react-query';\nimport { useSimpleInfiniteScroll } from 'use-simple-infinite-scroll';\n\ntype Item = {\n id: number;\n name: string;\n};\n\ntype Result = {\n data: Item[];\n nextCursor: number | null;\n};\n\nconst InfiniteScrollExample = () => {\n const {\n status,\n data,\n error,\n isFetching,\n isFetchingMore,\n fetchMore,\n canFetchMore,\n } = useInfiniteQueryLoading...
\n ) : status === 'error' ? (\n Error: {error && error.message}\n ) : (\n- \n {data &&\n data.map((page, i) => (\n
- {item.name} \n ))}\n
\n fetchMore()}\n disabled={!canFetchMore || !!isFetchingMore}\n >\n {isFetchingMore\n ? 'Loading more...'\n : canFetchMore\n ? 'Load More'\n : 'Nothing more to load'}\n \n
\n \n {isFetching && !isFetchingMore ? 'Background Updating...' : null}\n
\n \n );\n};\n```\n\n## API\n\n```ts\nconst useSimpleInfiniteScroll: (options: {\n canLoadMore: boolean;\n onLoadMore: () => void;\n rootMargin?: string;\n threshold?: number | number[];\n}) => [(target: Element | null) => void, (root: Element | null) => void];\n```\n\n| Name | Type | Default | Required | Descripttion |\n| :------------ | :------------------- | :------ | :------: | :----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `canLoadMore` | `boolean` | | ✓ | Specifies if there are more entities to load. |\n| `onLoadMore` | `() => void` | | ✓ | Called when the user has scrolled all the way to the end. |\n| `rootMargin` | `string` | `\"0px\"` | | Margin around the root. Can have values similar to the CSS margin property, e.g. `\"10px 20px 30px 40px\"` (top, right, bottom, left). |\n| `threshold` | `number \\| number[]` | `0` | | Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. |\n\nFor more information on `rootMargin` and `threshold` option, visit the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\n## FAQ\n\n### How can I assign multiple refs to a component?\n\nYou can wrap multiple `ref` assignments in a single `useCallback`:\n\n```tsx\nimport React, { useRef, useCallback } from 'react';\nimport { useSimpleInfiniteScroll } from 'use-simple-infinite-scroll';\n\nconst AssignMultipleRefsExample = () => {\n const rootRef = useRef\n \n
\n );\n};\n```\n\n### Which browsers are supported?\n\nuse-simple-infinite-scroll supports all of the major modern browsers.\nBrowsers like IE11 are not supported: if you need to support older browsers you can add [IntersectionObserver polyfill](https://www.npmjs.com/package/intersection-observer).\n\nYou can install the polyfill via npm or by downloading a [zip](https://github.com/w3c/IntersectionObserver/archive/gh-pages.zip) of this repository:\n\n```sh\nnpm install intersection-observer\n```\n\nThen import it in your app:\n\n```js\nimport 'intersection-observer';\n```\n\n## Contributing\n\nContributions are always welcome! Please read the [contributing](./CONTRIBUTING.md) first.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n![\"\"/](\"https://avatars1.githubusercontent.com/u/12913947?v=4?s=100\") Kotaro Sugawara 💻 📖 🤔 🚇 ⚠️ | \n