{"id":15313878,"url":"https://github.com/itsdouges/react-scroll-paginator","last_synced_at":"2026-02-02T02:01:49.505Z","repository":{"id":57344251,"uuid":"90508563","full_name":"itsdouges/react-scroll-paginator","owner":"itsdouges","description":"📃 A lightweight scroll based paginator for ReactJS. Opt out defer pagination until a user clicks a button!","archived":false,"fork":false,"pushed_at":"2017-05-07T12:50:58.000Z","size":1044,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-24T22:13:51.924Z","etag":null,"topics":["gw2armory","infinite-scroll","javascript","paginator","react","react-infinite","reactjs","scroll"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/itsdouges.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":"2017-05-07T04:22:24.000Z","updated_at":"2025-02-11T15:49:20.000Z","dependencies_parsed_at":"2022-09-11T08:41:58.325Z","dependency_job_id":null,"html_url":"https://github.com/itsdouges/react-scroll-paginator","commit_stats":null,"previous_names":["madou/react-scroll-paginator"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/itsdouges/react-scroll-paginator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-scroll-paginator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-scroll-paginator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-scroll-paginator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-scroll-paginator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdouges","download_url":"https://codeload.github.com/itsdouges/react-scroll-paginator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-scroll-paginator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29001474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T01:32:03.847Z","status":"online","status_checked_at":"2026-02-02T02:00:07.448Z","response_time":58,"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":["gw2armory","infinite-scroll","javascript","paginator","react","react-infinite","reactjs","scroll"],"created_at":"2024-10-01T08:43:30.887Z","updated_at":"2026-02-02T02:01:49.473Z","avatar_url":"https://github.com/itsdouges.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [react-scroll-paginator](https://github.com/madou/react-scroll-paginator)\n\n[![NPM version](http://img.shields.io/npm/v/react-scroll-paginator.svg?style=flat-square)](https://www.npmjs.com/package/react-scroll-paginator)\n[![NPM downloads](http://img.shields.io/npm/dm/react-scroll-paginator.svg?style=flat-square)](https://www.npmjs.com/package/react-scroll-paginator)\n[![Build Status](http://img.shields.io/travis/madou/react-scroll-paginator/master.svg?style=flat-square)](https://travis-ci.org/madou/react-scroll-paginator)\n[![codecov](https://codecov.io/gh/madou/react-scroll-paginator/branch/master/graph/badge.svg)](https://codecov.io/gh/madou/react-scroll-paginator)\n[![Dependency Status](http://img.shields.io/david/madou/react-scroll-paginator.svg?style=flat-square)](https://david-dm.org/madou/react-scroll-paginator)\n\nA lightweight scroll based paginator for ReactJS.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/madou/react-scroll-paginator/blob/master/example.gif?raw=true\" style=\"margin:0 auto\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n```sh\nnpm install react-scroll-paginator\n```\n\n## Usage\n\n```javascript\nimport ReactStickyHeader from 'react-scroll-paginator';\n\nclass View extends Component {\n  state: {\n    rows: Array\u003cnumber\u003e,\n    count: number,\n    limit: number,\n    offset: number,\n  } = {\n    rows: [],\n  };\n\n  props: {\n    infiniteScroll?: boolean,\n  };\n\n  fakeApi = createFakeApi();\n\n  action = () =\u003e {\n    return this.fakeApi().then((data) =\u003e {\n      this.setState((state) =\u003e ({\n        ...data,\n        rows: state.rows.concat(data.rows),\n      }));\n    });\n  };\n\n  renderChild (row: number, index: number) {\n    return (\n      \u003cli key={index} className=\"View_child\"\u003e\n        {row}\n      \u003c/li\u003e\n    );\n  }\n\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cReactScrollPaginator\n          {...this.props}\n          action={this.action}\n          rows={this.state.rows}\n          count={this.state.count}\n          limit={10}\n          initialOffset={0}\n          progressComponent={\u003cdiv className=\"View_progress\"\u003eLOADING...\u003c/div\u003e}\n        \u003e\n          {this.renderChild}\n        \u003c/ReactScrollPaginator\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n| prop | type | required |\n|-|-|-|\n| children | (item: T, index: number) =\u003e Children | yes |\n| limit | number | yes |\n| count | number | yes |\n| rows | Array\u003cT\u003e | yes |\n| action | (limit: number, offset: number) =\u003e Promise\u003c*\u003e | yes |\n| initialOffset | number | no |\n| className | string | no |\n| progressComponent | Children | no |\n| infiniteScroll | boolean | no |\n| renderContainer | (props: ContainerProps) =\u003e Children | no |\n| renderButton | (props: ButtonProps) =\u003e Children | no |\n\n### Props\n\n#### children: (item: T, index: number) =\u003e Children\n\nTakes a function that returns some jsx.\n\n#### limit: number\n\nHow big each page should be.\n\n#### count: number\n\nTotal number of rows to expect for all pages combined.\n\n#### rows: Array\u003cT\u003e\n\nArray of rows that can be of any type.\n\n#### action: (limit: number, offset: number) =\u003e Promise\u003c*\u003e\n\nAction that the paginator will call to load more data. Expects the function to return a promise that will eventually resolve.\n\n#### initialOffset: number\n\nIf you want to start from a position other than 0, set this.\n\n#### className: string\n\n#### progressComponent: Children\n\nComponent to render when the paginator is loading.\n\n#### infiniteScroll: boolean\n\nSet this to true if you want pagination to start immediately when the user scrolls into view. Don't set this if you want the user to interact with a \"LOAD MORE\" button to begin pagination.\n\n#### renderContainer: (props: ContainerProps) =\u003e Children\n\nSet this to override the default `ul` container with something else. It is passed `children` in props.\n\n#### renderButton: (props: ButtonProps) =\u003e Children\n\nSet this to override the default load more `button`. It is passed a `onClick` in props.\n\n## React Story Book\n\nTo run the component in various modes, run the following command then go to `http://localhost:6006/`.\n\n```bash\nnpm start\n```\n\n## Testing\n\n```bash\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-scroll-paginator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdouges%2Freact-scroll-paginator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-scroll-paginator/lists"}