{"id":20530205,"url":"https://github.com/muriukialex/react-infinite-scroll","last_synced_at":"2026-02-28T01:34:15.210Z","repository":{"id":205572720,"uuid":"714205159","full_name":"muriukialex/react-infinite-scroll","owner":"muriukialex","description":"A package to add infinite scroll functionality to your react application","archived":false,"fork":false,"pushed_at":"2024-08-12T05:19:15.000Z","size":383,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-14T03:18:04.558Z","etag":null,"topics":["react","react-hooks","react-infinite-scroll"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@muriukialex/react-infinite-scroll","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/muriukialex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-04T08:06:20.000Z","updated_at":"2024-08-12T05:17:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"6fdf6c50-f831-4c9e-b81b-6868411576ae","html_url":"https://github.com/muriukialex/react-infinite-scroll","commit_stats":null,"previous_names":["muriukialex/react-infinite-scroll"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muriukialex%2Freact-infinite-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muriukialex%2Freact-infinite-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muriukialex%2Freact-infinite-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muriukialex%2Freact-infinite-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muriukialex","download_url":"https://codeload.github.com/muriukialex/react-infinite-scroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224859687,"owners_count":17381677,"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":["react","react-hooks","react-infinite-scroll"],"created_at":"2024-11-15T23:35:46.363Z","updated_at":"2026-02-28T01:34:10.169Z","avatar_url":"https://github.com/muriukialex.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @muriukialex/react-infinite-scroll\n\nA custom React hook for implementing infinite scroll functionality with ease. This hook simplifies the process of setting up an Intersection Observer for infinite scrolling in your React application.\n\n## Installation\n\nTo use this hook in your React project, follow these steps:\n\n1. Install it using npm or yarn:\n\n   ```bash\n   npm install @muriukialex/react-infinite-scroll\n   # or\n   yarn add @muriukialex/react-infinite-scroll\n   ```\n\n2. Import and use the `useInfiniteScroll` hook in your React component.\n\n```javascript\nimport useInfiniteScroll from '@muriukialex/react-infinite-scroll';\n\n// ... (your component code)\n```\n\n## Usage\n\nHere's how to use the `useInfiniteScroll` hook in your React component:\n\n```javascript\nimport { useState, useRef } from 'react';\nimport useInfiniteScroll from '@muriukialex/react-infinite-scroll';\n\n// ... (your other imports)\n\nconst defaultParams = {\n  _start: 0,\n  _limit: 10,\n};\n\nexport default function App() {\n  const [params, updateParams] = useState(defaultParams);\n  const { isLoading, items } = usePosts({ params });\n  const targetRef = useRef(null);\n\n  const onLoadMore = () =\u003e {\n    if (params._start \u003e 95) {\n      return;\n    }\n    updateParams(prev =\u003e ({\n      _start: prev._start + 10,\n      _limit: prev._limit,\n    }));\n  };\n\n  const [isVisible] = useInfiniteScroll({ targetRef, onLoadMore });\n\n  if (isLoading \u0026\u0026 items.length === 0) return \u003ch2\u003eIs loading\u003c/h2\u003e;\n\n  return (\n    \u003cdiv className=\"App container\"\u003e\n      \u003cdiv className=\"floating\"\u003e\n        {isVisible ? (\n          \u003cspan\u003e✅ Element Visible\u003c/span\u003e\n        ) : (\n          \u003cspan\u003e❌ Element Not Visible\u003c/span\u003e\n        )}\n      \u003c/div\u003e\n      \u003ch1\u003eInfinite Scroll Example\u003c/h1\u003e\n      \u003cItems items={items} /\u003e\n      {isLoading \u0026\u0026 \u003cdiv className=\"loader\"\u003eIs loading...\u003c/div\u003e}\n      {params._start \u003c 95 ? \u003cdiv ref={targetRef} /\u003e : \u003ch4\u003eReached end\u003c/h4\u003e}\n    \u003c/div\u003e\n  );\n}\n```\n\n## API\n\n### `useInfiniteScroll(options: useInfiniteScrollProps): boolean`\n\n- `options`: An object containing the following properties:\n\n  - `targetRef` (required): A React ref to the target element that triggers the infinite scroll when it becomes visible in the viewport.\n  - `onLoadMore` (required): A callback function to execute when the target element becomes visible, indicating the need to load more content.\n  - `options` (optional): An object containing configuration options for the Intersection Observer. The default values are used if not provided.\n\n- Returns a boolean value, `isVisible`, which indicates whether the target element is currently visible in the viewport.\n\n## License\n\nThis project is licensed under the ISC License.\n\n## Author\n\n[muriukialex](https://github.com/muriukialex)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuriukialex%2Freact-infinite-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuriukialex%2Freact-infinite-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuriukialex%2Freact-infinite-scroll/lists"}