{"id":27308520,"url":"https://github.com/tasin5541/react-infinite-observer","last_synced_at":"2025-04-12T04:59:59.270Z","repository":{"id":206786949,"uuid":"717699168","full_name":"Tasin5541/react-infinite-observer","owner":"Tasin5541","description":"A library that offers a simple hook to implement infinite scroll in react component, with full control over the behavior. Implemented with IntersectionObserver.","archived":false,"fork":false,"pushed_at":"2025-03-28T23:18:17.000Z","size":2266,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T04:59:53.032Z","etag":null,"topics":["react","react-infinite","react-infinite-scroll","react-infinite-scroll-hook","react-infinite-scroll-observer","react-library","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-infinite-observer","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/Tasin5541.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":"2023-11-12T09:50:48.000Z","updated_at":"2025-02-21T02:45:47.000Z","dependencies_parsed_at":"2023-11-12T10:30:57.826Z","dependency_job_id":"c56678d6-b4c3-4d34-9b8c-0a7909960ea7","html_url":"https://github.com/Tasin5541/react-infinite-observer","commit_stats":null,"previous_names":["tasin5541/react-infinite-observer"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2Freact-infinite-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2Freact-infinite-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2Freact-infinite-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2Freact-infinite-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tasin5541","download_url":"https://codeload.github.com/Tasin5541/react-infinite-observer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519469,"owners_count":21117757,"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-infinite","react-infinite-scroll","react-infinite-scroll-hook","react-infinite-scroll-observer","react-library","reactjs"],"created_at":"2025-04-12T04:59:58.610Z","updated_at":"2025-04-12T04:59:59.257Z","avatar_url":"https://github.com/Tasin5541.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-infinite-observer\n\n[![Version Badge][npm-version-svg]][package-url]\n[![GZipped size][npm-minzip-svg]][bundlephobia-url]\n[![Test][test-image]][test-url]\n[![License][license-image]][license-url]\n\nCheck live [StoryBook demo](https://tasin5541.github.io/react-infinite-observer/)\n\n![React Infinite Observer](https://raw.githubusercontent.com/Tasin5541/react-infinite-observer/main/demo/demo.gif)\n\n## Overview\n\nReact Infinite Observer is a lightweight React hook for handling infinite scrolling in your web applications. It enables you to efficiently load and display large sets of data by triggering requests as the user scrolls down/up the page.\n\n## Features\n\n- **Infinite Scrolling:** Load more data automatically as the user scrolls down/up the page.\n- **Easy Integration:** Simple integration into your existing React components.\n- **Flexibility:** Customize the trigger point for fetching more data and loading indicator appearance.\n- **Full Manual Control:** The hook provides option to autofetch data without scolling until height of list \u003e screen height\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install react-infinite-observer\n```\n\nor\n\n```bash\nyarn add react-infinite-observer\n```\n\n## Usage\n\nStatic Ref\n\n```tsx\nimport { FC, useState, useCallback, useEffect } from 'react';\nimport { useInfiniteObserver } from 'react-infinite-observer';\n\nexport const App: FC = () =\u003e {\n  const [items, setItems] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [page, setPage] = useState(1);\n\n  const onIntersection = useCallback(() =\u003e {\n    setPage((pageNo) =\u003e pageNo + 1);\n  }, []);\n\n  const [setRefElement] = useInfiniteObserver(onIntersection);\n\n  const fetchData = async () =\u003e {\n    // Fetch more data and update state\n    setIsLoading(true);\n    // ... fetch data logic\n    setIsLoading(false);\n  };\n\n  useEffect(() =\u003e {\n    fetchData();\n  }, [page]);\n\n  return (\n    \u003cdiv\u003e\n      \u003cul\u003e\n        {items.map((item) =\u003e (\n          \u003cli key={`${item.id.name}-${item.id.value}-${item.login.uuid}`}\u003e\n            {item.name.last}\n          \u003c/li\u003e\n        ))}\n        \u003cdiv ref={setRefElement}\u003e\u003c/div\u003e\n      \u003c/ul\u003e\n      {isLoading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n    \u003c/div\u003e\n  );\n};\n```\n\nDynamic Ref (keep fetching data until screen is filled)\n\n```tsx\nimport { FC, useState, useCallback, useEffect } from 'react';\nimport { useInfiniteObserver } from 'react-infinite-observer';\n\nexport const App: FC = () =\u003e {\n  const [items, setItems] = useState([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [page, setPage] = useState(1);\n\n  const onIntersection = useCallback(() =\u003e {\n    setPage((pageNo) =\u003e pageNo + 1);\n  }, []);\n\n  const [setRefElement] = useInfiniteObserver(onIntersection);\n\n  const fetchData = async () =\u003e {\n    // Fetch more data and update state\n    setIsLoading(true);\n    // ... fetch data logic\n    setIsLoading(false);\n  };\n\n  useEffect(() =\u003e {\n    fetchData();\n  }, [page]);\n\n  return (\n    \u003cdiv\u003e\n      \u003cul\u003e\n        {items.map((item, index) =\u003e (\n          \u003cli\n            key={`${item.id.name}-${item.id.value}-${item.login.uuid}`}\n            ref={index === items.length - 1 ? setRefElement : undefined}\n          \u003e\n            {item.name.last}\n          \u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n      {isLoading \u0026\u0026 \u003cp\u003eLoading...\u003c/p\u003e}\n    \u003c/div\u003e\n  );\n};\n```\n\n## API\n\n### infiniteObserverOptions\n\nProvide these as the options argument in the `useInfiniteObserver` hook.\n\n| Name               | Type         | Default     | Description                                                                                    |\n| ------------------ | ------------ | ----------- | ---------------------------------------------------------------------------------------------- |\n| **threshold**      | `number`     | `1`         | Number between `0` and `1` indicating the percentage that should be visible before triggering. |\n| **onIntersection** | `() =\u003e void` | `undefined` | Call this function whenever the Ref Element is in view for the first time.                     |\n\n## Example\n\nCheck out the [stackblitz snippet](https://stackblitz.com/edit/stackblitz-starters-plpsiy?file=src%2FApp.tsx) for a simple implementation.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/Tasin5541/react-infinite-observer/blob/main/LICENSE) file for details.\n\n[package-url]: https://www.npmjs.com/package/react-infinite-observer\n[npm-version-svg]: https://img.shields.io/npm/v/react-infinite-observer.svg\n[npm-minzip-svg]: https://img.shields.io/bundlephobia/minzip/react-infinite-observer.svg\n[bundlephobia-url]: https://bundlephobia.com/result?p=react-infinite-observer\n[license-image]: https://img.shields.io/npm/l/react-infinite-observer.svg\n[license-url]: LICENSE\n[test-image]: https://github.com/Tasin5541/react-infinite-observer/actions/workflows/test.yml/badge.svg?branch=main\n[test-url]: https://github.com/Tasin5541/react-infinite-observer/actions?query=workflow%3ATest\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasin5541%2Freact-infinite-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftasin5541%2Freact-infinite-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasin5541%2Freact-infinite-observer/lists"}