{"id":20617642,"url":"https://github.com/alan2207/react-scrollable-pagination","last_synced_at":"2025-07-04T17:32:42.856Z","repository":{"id":57344280,"uuid":"164355740","full_name":"alan2207/react-scrollable-pagination","owner":"alan2207","description":"📜 Paginate your application's data by scrolling...","archived":false,"fork":false,"pushed_at":"2019-02-02T17:32:43.000Z","size":769,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-03T15:12:56.647Z","etag":null,"topics":["infinite-scroll","pagination","react","react-router","render-props","scrolling"],"latest_commit_sha":null,"homepage":"http://react-scrollable-pagination.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alan2207.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}},"created_at":"2019-01-06T23:50:49.000Z","updated_at":"2023-03-24T04:08:49.000Z","dependencies_parsed_at":"2022-09-11T08:41:50.937Z","dependency_job_id":null,"html_url":"https://github.com/alan2207/react-scrollable-pagination","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alan2207/react-scrollable-pagination","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-scrollable-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-scrollable-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-scrollable-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-scrollable-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alan2207","download_url":"https://codeload.github.com/alan2207/react-scrollable-pagination/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-scrollable-pagination/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262419405,"owners_count":23308067,"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","pagination","react","react-router","render-props","scrolling"],"created_at":"2024-11-16T12:05:09.194Z","updated_at":"2025-07-04T17:32:42.839Z","avatar_url":"https://github.com/alan2207.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-scrollable-pagination\n\n\u003e React component for scrollable bidirectional data pagination...\n\n[![NPM](https://img.shields.io/npm/v/react-scrollable-pagination.svg)](https://www.npmjs.com/package/react-scrollable-pagination)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n### [Demo](http://react-scrollable-pagination.surge.sh)\n\n![Demo](demo.gif?raw=true 'Demo')\n\n## Installation\n\n```bash\nnpm install --save react-scrollable-pagination\n```\n\nor\n\n```bash\nyarn add react-scrollable-pagination\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport ReactScrollablePagination from 'react-scrollable-pagination';\nimport {withrouter} from 'react-router-dom';\n\n// inject history and location props\nconst Scroller = withRouter(ReactScrollablePagination);\n\nconst Component = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch3\u003eExample\u003c/h3\u003e\n    \u003cScroller\n      className=\"scroller\"\n      style={{height: '70vh', border: '1px solid black'}}\n      pageParam=\"page\"\n      fixed\n      fetchData={page =\u003e {\n        return fetch(`${URL}?page=${page}`);\n      }}\n      dataSelector={res =\u003e res}\n      metaSelector={res =\u003e res.meta || {totalPages: 10}}\n      loader={\u003cdiv className=\"loader\" /\u003e}\n      beforeInitialLoad={() =\u003e console.log('Init')}\n      afterInitialLoad={() =\u003e console.log('Done')}\n    \u003e\n      /* IF USING FIXED: you will probably need to give minHeight of the div to\n      be at least the same as the height of the component itself, to maintain\n      scrollability even when there is not enough items to overflow. But if you\n      have only one page, setting won't be neccessary, and will only add\n      unneccessary scrollbar, so make sure you have more than one page before\n      giving it the minHeight property */\n      {(data, meta) =\u003e (\n        \u003cdiv style={meta.totalPages \u003e 1 ? {minHeight: '70vh'} : {}}\u003e\n          data.map(item =\u003e (\n          \u003cdiv key={item}\u003e\n            \u003cLink to={`/item/${item}`}\u003e{item}\u003c/Link\u003e\n          \u003c/div\u003e\n          ))\n        \u003c/div\u003e\n      )}\n    \u003c/Scroller\u003e\n  \u003c/div\u003e\n);\n```\n\nFor more detailed example you can check out the `example` folder.\n\n### Props\n\n\u003ctable class=\"tg\"\u003e\n  \u003ctr\u003e\n    \u003cth class=\"tg-s6z2\"\u003eProp\u003c/th\u003e\n    \u003cth class=\"tg-s268\"\u003etype\u003c/th\u003e\n    \u003cth class=\"tg-s268\"\u003eisRequired\u003c/th\u003e\n    \u003cth class=\"tg-s268\"\u003edefaultValue\u003c/th\u003e\n    \u003cth class=\"tg-s268\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-s268\"\u003echildren\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003efunction\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003etrue\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003e\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003eRender prop function that provides data that should be rendered.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-s268\"\u003ehistory\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003eobject\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003etrue\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003e\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003eHistory object that should be provided by the router. It can be provided by wrapping the component in `withRouter` HOC.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-s268\"\u003elocation\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003eobject\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003etrue\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003e\u003c/td\u003e\n    \u003ctd class=\"tg-s268\"\u003eLocation object that should be provided by the router It can be provided by wrapping the component in `withRouter` HOC.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003efetchData\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efunction\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003etrue\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eFunction that will fetch the data. It accepts 'page' parameter and It's return value must be a promise.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003edataSelector\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efunction\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003etrue\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eFunction that extracts the data from resolved promise that is being returned by 'fetchData' function. \u003cbr\u003eThis data will be provided as data inside render prop function\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003emetaSelector\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efunction\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003etrue\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eFunction that extracts the meta data from resolved promise that is being returned by fetchData function. The meta object must contain `totalPages` property.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003eclassName\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003estring\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e\"\"\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eStyle your component with classes.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003estyle\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eobject\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e{}\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eCustom inline styles for the component.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003epageParam\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003estring\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e\"page\"\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eThe query parameter that will control pagination.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003efixed\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eboolean\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eShould be set if the component should become scrollable. In that case it must have fixed height. If false, window scroll will control pagination.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003eloader\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eJSX element\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003e\u0026lt;/div\u0026gt;Loading...\u0026lt;/div\u0026gt;\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eCustom loader to display on top or bottom of the component while loading more data.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003ebeforeInitialLoad\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efunction\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003enoop func\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eFunction that is triggered when the component is mounted and before fetching the data. Convenient to display loading spinner until the initial data is loaded.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tg-0lax\"\u003eafterInitialLoad\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efunction\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003efalse\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003enoop func\u003c/td\u003e\n    \u003ctd class=\"tg-0lax\"\u003eFunction that is triggered when the result of fetchData is resolved. Convenient to hide loading spinner once the data has been loaded.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Todo\n\n- Make it independent of react-router (At the moment, the user must wrap it\n  inside `withRouter` to be able to use it properly )\n- Add option to add top and bottom offset. (At the moment, it scrolls up and\n  down when scroller reaches top and bottom.)\n\n## License\n\nMIT © [alan2207](https://github.com/alan2207)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan2207%2Freact-scrollable-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falan2207%2Freact-scrollable-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan2207%2Freact-scrollable-pagination/lists"}