{"id":24211328,"url":"https://github.com/tylershin/react-intersection-observing-infinity-scroll","last_synced_at":"2025-09-19T20:36:32.265Z","repository":{"id":39562529,"uuid":"157852452","full_name":"TylerShin/react-intersection-observing-infinity-scroll","owner":"TylerShin","description":"React component that supports infinity scroll","archived":false,"fork":false,"pushed_at":"2023-01-04T17:48:53.000Z","size":2349,"stargazers_count":13,"open_issues_count":25,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-24T12:47:02.226Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/TylerShin.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}},"created_at":"2018-11-16T10:34:25.000Z","updated_at":"2023-06-28T00:29:37.000Z","dependencies_parsed_at":"2023-02-02T19:32:16.965Z","dependency_job_id":null,"html_url":"https://github.com/TylerShin/react-intersection-observing-infinity-scroll","commit_stats":null,"previous_names":["tylorshin/react-blazing-infinity-scroll"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TylerShin/react-intersection-observing-infinity-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerShin%2Freact-intersection-observing-infinity-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerShin%2Freact-intersection-observing-infinity-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerShin%2Freact-intersection-observing-infinity-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerShin%2Freact-intersection-observing-infinity-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TylerShin","download_url":"https://codeload.github.com/TylerShin/react-intersection-observing-infinity-scroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerShin%2Freact-intersection-observing-infinity-scroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275998248,"owners_count":25567385,"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","status":"online","status_checked_at":"2025-09-19T02:00:09.700Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-01-14T02:34:53.346Z","updated_at":"2025-09-19T20:36:32.234Z","avatar_url":"https://github.com/TylerShin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-intersection-observing-infinity-scroll [![GitHub Starts](https://img.shields.io/github/stars/TylorShin/react-intersection-observing-infinity-scroll.svg)](https://github.com/TylorShin/react-intersection-observing-infinity-scroll) [![GitHub contributors](https://img.shields.io/github/contributors/TylorShin/react-intersection-observing-infinity-scroll.svg)](https://github.com/TylorShin/react-intersection-observing-infinity-scroll/graphs/contributors/) [![Node version](https://img.shields.io/badge/Node-8+-green.svg)](https://nodejs.org/) [![React Version](https://img.shields.io/badge/React-16%2B-green.svg)](https://reactjs.org/)\n\n![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)\n--- | --- | --- | --- | --- |\n ✔ |  ✔ | 9+ ✔ |  ✔ |  ✔ |\n\n[example page](https://tylorshin.github.io/react-intersection-observing-infinity-scroll/example)\n\nReact component that supports infinity scroll with tiny size (\u003c 3kb without gzip)  \nIt supports SSR build and fallback render with `\u003cdiv\u003e` element.  \n\nThis library doesn't use any `eventListener` for scroll event. Rather than eventListener, It uses [Intersection Obeserver API] (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). \n This is the reason why you need polyfill.\n\nAlso, this library is written in TypeScript.  \n\n## Before install\nYou should install [intersection Observer polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).  \nYou can choose all possible ways to install the polyfill, however the polyfill **MUST** comes before the library script.  \nI think you can optimize polyfill strategy like [Polyfill.io](https://polyfill.io/v2/docs/).  \n\nexample\n```\n\u003c!-- Load the polyfill first. --\u003e\n\u003cscript src=\"path/to/intersection-observer.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Load all other JavaScript. --\u003e\n\u003cscript src=\"react-intersection-observing-infinity-scroll.js\"\u003e\u003c/script\u003e\n```\n\n## How to install\n**IMPORTANT**  \nYou should install `intersection Observer` polyfill to support IE \u0026 elder browsers.\n```\n$ npm install -S react-intersection-observing-infinity-scroll\n\n```\n\n## How to use\n```\n\u003cInfiniteScroll\n  loadMoreFunc={loadMore}\n  isLoading={isLoading}\n  hasMore={!isEnd}\n  loaderComponent={\u003cdiv className=\"loader\"\u003e{this.renderLoadingSpinner()}\u003c/div\u003e}\n\u003e\n  {/* list content */}\n\u003c/InfiniteScroll\u003e\n```\n\nIf you want to see detail implementation, visit [example page](https://tylorshin.github.io/react-intersection-observing-infinity-scroll/example) and code.\n\n## To Do\n\n- [x] Support server side build for Universal rendering.\n- [ ] Support `position: fixed` user custom loading component.\n- [ ] Support Reverse direction infinite scrolling.\n- [ ] Hide invisible items with some buffer for the performance enhancement.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylershin%2Freact-intersection-observing-infinity-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylershin%2Freact-intersection-observing-infinity-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylershin%2Freact-intersection-observing-infinity-scroll/lists"}