{"id":18722174,"url":"https://github.com/huangbinjie/react-scroll","last_synced_at":"2025-04-12T14:32:53.805Z","repository":{"id":65484768,"uuid":"71989927","full_name":"huangbinjie/react-scroll","owner":"huangbinjie","description":"Effortless to get the twitter level infinite scroll implementation by only a bit of props","archived":false,"fork":false,"pushed_at":"2018-07-02T05:50:24.000Z","size":943,"stargazers_count":72,"open_issues_count":0,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T06:04:07.991Z","etag":null,"topics":["infinite-scroll","virtual-scroll"],"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/huangbinjie.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":null,"security":null,"support":null}},"created_at":"2016-10-26T09:53:59.000Z","updated_at":"2024-08-05T09:29:32.000Z","dependencies_parsed_at":"2023-01-25T11:55:11.950Z","dependency_job_id":null,"html_url":"https://github.com/huangbinjie/react-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangbinjie%2Freact-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangbinjie%2Freact-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangbinjie%2Freact-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangbinjie%2Freact-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huangbinjie","download_url":"https://codeload.github.com/huangbinjie/react-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248581125,"owners_count":21128107,"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":["infinite-scroll","virtual-scroll"],"created_at":"2024-11-07T13:40:25.026Z","updated_at":"2025-04-12T14:32:53.785Z","avatar_url":"https://github.com/huangbinjie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-iscroller\n\nAn effective react infinite scroll container. inspired by twitter's [blog](http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html).\n\n## Motivation\n\nAs the pwa(progressive web app) becoming more popular, the performance and user experience are more and more important. And infinite scroll is almost the most important part within a pwa project. But i found the results by searching `react infinite scroller` on github are not my needs. Fortunately, I found this article of [twitter](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3) on medium by chance. That's i want. So I tried to make my own one.\n\n## Install\n\n```sh\nnpm i react-iscroller\n```\n\n## Example\n\nIt's simple to use as follow:\n\n```ts\nimport { InfiniteScroller } from \"react-iscroller\"\n\nreturn \u003cInfiniteScroller\n  itemAverageHeight={22}\n  containerHeight={window.innerHeight}\n  items={this.state.messages}\n  itemKey=\"id\"\n  onRenderCell={this.renderCell}/\u003e\n```\n\n## Feature\n\n+ infinite load\n+ lazy load\n+ dynamic height\n  \u003cimg src=\"https://pic3.zhimg.com/v2-e769b234a500c9fc2cdb49a6af779a4b_b.gif?raw=true\" width=\"200px\"\u003e\n+ pure component\n+ cache\n+ resize\n\n## Online Demo\n\n[image_and_text](https://codesandbox.io/s/kmowxk6w83)\n\n## Props\n\n### containerHeight(required): number\n\nthe height of the wrapper of the infinite scroller\n\n### className(optional): string\n\nclassName attatched to scroller.\n\n### items(required): object[]\n\nyour data\n\n### itemKey(required): string\n\nidentity of your data. help scroller implements `pure component`.\n\n### itemAverageHeight(required): number\n\nAs the twitter blog mentioned, averageHeight can help scroller to guesstimate the buffer height. Usually your item height.\n\n### onRenderCell(required): (item: any, itemIndex: number) =\u003e ReactNode\n\ncalled when trying to render an item. if you want to force scroller to update cache(eg. after image loaded), you can call this method.\n\n### cache(optional): Cache[]\n\ncache the position of rendered item. your might need provide this prop when you want go back to the last place.\n\n### initialScrollTop(optional): number\n\nset scroller's scrollTop to `initialScrollTop` after first render. if you had provied `cache` and `initialScrollTop`, you can get the last interface before unmount of scroller component.\n\n### onScroll(optional): (scrollerDom: HTMLDivElement) =\u003e void\n\ncalled when scroller is scrolling.\n\n### onEnd?: () =\u003e void\n\ncalled after anchor had arrived bottom.\n\n## Caveat\n\n+ Your item which returned by `onRenderCell` will be wrapped by a div that used for calculation.\n\n+ Because of the `getBoundingClientRect`, I can't get the margin size. So you should not use `margin` in your\n  item css.\n\n+ Because of the [scroll bug](https://popmotion.io/blog/20170704-manually-set-scroll-while-ios-momentum-scroll-bounces/) in ios, if you suffered this problem, it's normally! However, I did some optimization for ios--avoid change scrollTop.\n\n+ 2.x version is a bit heavy for dynamic height. If you can give your dynamic content a certain height, please use the version of 1.1.7.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuangbinjie%2Freact-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuangbinjie%2Freact-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuangbinjie%2Freact-scroll/lists"}