{"id":20804401,"url":"https://github.com/sequencemedia/react-router-pagination","last_synced_at":"2025-07-18T10:02:33.977Z","repository":{"id":8425548,"uuid":"58317933","full_name":"sequencemedia/react-router-pagination","owner":"sequencemedia","description":"React Router Pagination","archived":false,"fork":false,"pushed_at":"2025-07-06T05:34:31.000Z","size":12012,"stargazers_count":12,"open_issues_count":0,"forks_count":6,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-06T06:36:32.496Z","etag":null,"topics":["component","pagination","react","router"],"latest_commit_sha":null,"homepage":"http://github.com/sequencemedia/react-router-pagination","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/sequencemedia.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-05-08T15:15:25.000Z","updated_at":"2025-07-06T05:34:32.000Z","dependencies_parsed_at":"2024-01-18T23:21:39.145Z","dependency_job_id":"aece23ca-3855-4efe-bce0-ffc2f20888eb","html_url":"https://github.com/sequencemedia/react-router-pagination","commit_stats":{"total_commits":1872,"total_committers":3,"mean_commits":624.0,"dds":"0.11698717948717952","last_synced_commit":"e2aa0bf96d6560109224bee804245978b4f1217b"},"previous_names":[],"tags_count":521,"template":false,"template_full_name":null,"purl":"pkg:github/sequencemedia/react-router-pagination","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-router-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-router-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-router-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-router-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sequencemedia","download_url":"https://codeload.github.com/sequencemedia/react-router-pagination/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-router-pagination/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265738171,"owners_count":23820156,"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":["component","pagination","react","router"],"created_at":"2024-11-17T19:09:12.164Z","updated_at":"2025-07-18T10:02:33.949Z","avatar_url":"https://github.com/sequencemedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-router-pagination\n\n## React Router Pagination\n\nA *React Router 7* pagination component.\n\n- You have lots of data?\n- You want users to page through that data?\n- You want the page to be reflected in the route, and you're using *React Router*?\n\nGiven some simple props, *React Router Pagination* will create a list of links to those pages.\n\n[Example implementations are available on GitHub.](https://github.com/sequencemedia/react-router-pagination-io) You can also [clone this repository](https://github.com/sequencemedia/react-router-pagination) and run Storybook.\n\n### Using the component\n\nRequired props:\n\n- A `totalPages` integer.\n\nNot quite required but not quite optional props:\n\n- A `pageNumber` integer.\n\nOptional props:\n\n1. A `match` object, for generating the `to` prop of each `\u003cLink /\u003e` component.\n2. An `onClick` handler, for when the user clicks a `\u003cLink /\u003e`.\n\nAdditional props:\n\n1. `spread`\n2. `format`\n\n### Example\n\nA component with props:\n\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={1}\n/\u003e\n```\nGenerates:\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"current-page\"\u003e\n        \u003ca href=\"/1\"\u003e\n            \u003cspan class=\"page-number\"\u003e1\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/2\"\u003e\n            \u003cspan class=\"page-number\"\u003e2\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n       \u003ca href=\"/3\"\u003e\n           \u003cspan class=\"page-number\"\u003e3\u003c/span\u003e\n       \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/4\"\u003e\n            \u003cspan class=\"page-number\"\u003e4\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/5\"\u003e\n           \u003cspan class=\"page-number\"\u003e5\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"forward-page\"\u003e\n        \u003ca href=\"/6\"\u003e\n            \u003cspan class=\"forward\"\u003e›\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"last-page\"\u003e\n        \u003ca href=\"/12\"\u003e\n            \u003cspan class=\"page-number\"\u003e12\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n(The default `match` object creates default route paths. You probably don't want that.)\n\n### About `totalPages`\n\n*React Router Pagination* doesn't care about how many items you have and how many items you want to show per page.\n\nIt only cares about the _total number of pages_.\n\n- Your data contains 120 items which you want to display at 10 items per page.\n- Your data contains 60 items which you want to display at 5 items per page.\n- Your data contains 240 items which you want to display at 20 items per page.\n\nIn which case, `totalPages` should be 12.\n\n```jsx\n\u003cPagination\n  totalPages={12}\n/\u003e\n```\n\n- Your data contains 121 items which you want to display at 10 items per page.\n- Your data contains 61 items which you want to display at 5 items per page.\n- Your data contains 241 items which you want to display at 20 items per page.\n\nIn which case, `totalPages` should be 13.\n\n```jsx\n\u003cPagination\n  totalPages={13}\n/\u003e\n```\n\n(Strings are coerced to numbers, and numbers are rounded.)\n\n*React Router Pagination* only _requires_ the _total number of pages_, which could be computed anywhere in your application ...\n\n... But it does expose a static function for computing the `totalPages`:\n\n```javascript\nconst totalPages = Pagination.calculateTotalPages(120, 10)\n```\n\nOr:\n\n```javascript\nconst totalPages = Pagination.calculateTotalPages(121, 10)\n```\n(This is the same function the component uses internally.)\n\nYou can use this function anywhere in your application to ensure that the same value is being presented in different components.\n\n### About `pageNumber`\n\n- Your data contains 120 items which you want to display at 10 items per page.\n\nTo display page 1:\n\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={1}\n/\u003e\n```\n\nTo display page 5:\n\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={5}\n/\u003e\n```\n\n(Strings are coerced to numbers, and numbers are rounded.)\n\n*React Router Pagination* constrains `pageNumber` to a min of 1 and a max of `totalPages`.\n\nAny of these will present page 1:\n\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={1}\n/\u003e\n```\n```jsx\n\u003cPagination\n  totalPages={12}\n/\u003e\n```\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={0}\n/\u003e\n```\n\nEither these will present page 12:\n\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={12}\n/\u003e\n```\n```jsx\n\u003cPagination\n  totalPages={12}\n  pageNumber={13}\n/\u003e\n```\n\n(Strings are coerced to numbers, and numbers are rounded.)\n\n... *React Router Pagination* exposes a static function for computing the `pageNumber` prop:\n\n```javascript\nconst pageNumber = Pagination.calculatePageNumber(0, 12)\n```\n\nOr:\n\n```javascript\nconst pageNumber = Pagination.calculatePageNumber(13, 12)\n```\n\nAgain, you can use this function anywhere in your application to ensure that the same value is being presented in different components.\n\n### Creating page routes with the `match` prop\n\nThe `match` prop has the same structure as *React Router* `match` prop.\n\nThe default has this structure:\n\n```javascript\n{\n  path: '/:pageNumber',\n  params: {\n    pageNumber: 1 /* or any integer */\n  }\n}\n```\n\nBut your `path` is more complex. You have a `\u003cRoute /\u003e` component matching the pattern:\n\n```\n/catalogue/products/:id\n```\n\nAnd you have a number of stores selling that product, for which you have a `\u003cRoute /\u003e` component matching the pattern:\n\n```\n/catalogue/products/:id/stores/:pageNumber\n```\n\nLet's say the store `id` is `ABCDEF`.\n\nFor the list of stores, supply the `Pagination` component  with a `match` prop of this structure:\n\n```javascript\n{\n  path: '/catalogue/products/:id/stores/:pageNumber',\n  params: {\n    id: 'ABCDEF'\n  }\n}\n```\n\n*React Router Pagination* uses the *React Router* utility `generatePath` to compute paths:\n\n```javascript\nconst getLinkTo = ({ path, params }, pageNumber) =\u003e generatePath(path, { ...params, pageNumber })\n```\n\nGiven a `totalPages` of 12 and a `spread` of 5 then *React Router Pagination* will create a list of `\u003cLink /\u003e` components:\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"current-page\"\u003e\n        \u003ca href=\"/catalogue/products/ABCDEF/stores/1\"\u003e\n            \u003cspan class=\"page-number\"\u003e1\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/catalogue/products/ABCDEF/stores/2\"\u003e\n            \u003cspan class=\"page-number\"\u003e2\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n       \u003ca href=\"/catalogue/products/ABCDEF/stores/3\"\u003e\n           \u003cspan class=\"page-number\"\u003e3\u003c/span\u003e\n       \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/catalogue/products/ABCDEF/stores/4\"\u003e\n            \u003cspan class=\"page-number\"\u003e4\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/catalogue/products/ABCDEF/stores/5\"\u003e\n           \u003cspan class=\"page-number\"\u003e5\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"forward-page\"\u003e\n        \u003ca href=\"/catalogue/products/ABCDEF/stores/6\"\u003e\n            \u003cspan class=\"forward\"\u003e›\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"last-page\"\u003e\n        \u003ca href=\"/catalogue/products/ABCDEF/stores/12\"\u003e\n            \u003cspan class=\"page-number\"\u003e12\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nWhat's `spread`?\n\n### Additional props, etc\n\n1. `spread`\n2. `format`\n\nThe value for `spread` should be an integer. It's the maximum number of page links to be displayed together.\n\n#### Spread\n\nIf `totalPages` is 12, `pageNumber` is 1, and `spread` is 5, then links to pages 1, 2, 3, 4 and 5 will be displayed (as well as a \"forward\" link to page 6 and a link to the last page, 12).\n\nClass names indicate the `current-page`, the `forward-page`, and the `last-page`.\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"current-page\"\u003e\n        \u003ca href=\"/1\"\u003e\n            \u003cspan class=\"page-number\"\u003e1\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/2\"\u003e\n            \u003cspan class=\"page-number\"\u003e2\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/3\"\u003e\n            \u003cspan class=\"page-number\"\u003e3\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/4\"\u003e\n            \u003cspan class=\"page-number\"\u003e4\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/5\"\u003e\n            \u003cspan class=\"page-number\"\u003e5\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"forward-page\"\u003e\n        \u003ca href=\"/6\"\u003e\n            \u003cspan class=\"forward\"\u003e›\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"last-page\"\u003e\n        \u003ca href=\"/12\"\u003e\n            \u003cspan class=\"page-number\"\u003e12\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nIf `totalPages` is 12, `pageNumber` is 4, and `spread` is 5, then links to pages 1, 2, 3, 4 and 5 will be displayed (as well as a \"forward\" link to page 6 and a link to the last page, 12).\n\nClass names indicate the `zero-page`, the `current-page`, the `forward-page`, and the `last-page`.\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"zero-page\"\u003e\n        \u003ca href=\"/1\"\u003e\n            \u003cspan class=\"page-number\"\u003e1\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/2\"\u003e\n            \u003cspan class=\"page-number\"\u003e2\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/3\"\u003e\n            \u003cspan class=\"page-number\"\u003e3\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"current-page\"\u003e\n        \u003ca href=\"/4\"\u003e\n            \u003cspan class=\"page-number\"\u003e4\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/5\"\u003e\n            \u003cspan class=\"page-number\"\u003e5\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/6\"\u003e\n            \u003cspan class=\"page-number\"\u003e6\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"forward-page\"\u003e\n        \u003ca href=\"/7\"\u003e\n            \u003cspan class=\"forward\"\u003e›\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"last-page\"\u003e\n        \u003ca href=\"/12\"\u003e\n            \u003cspan class=\"page-number\"\u003e12\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nIf `totalPages` is 12, `pageNumber` is 8, and `spread` is 5, then links to pages 6, 7, 8, 9, and 10 will be displayed (as well as a \"reverse\" link to page 5, a \"forward\" link to page 11 and a link to the first page, 1, and the last page, 12).\n\nClass names indicate the `zero-page`, the `reverse-page`, the `current-page`, the `forward-page`, and the `last-page`.\n\n```html\n\u003cul class=\"pagination\"\u003e\n    \u003cli class=\"zero-page\"\u003e\n        \u003ca href=\"/1\"\u003e\n            \u003cspan class=\"page-number\"\u003e1\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"reverse-page\"\u003e\n        \u003ca href=\"/5\"\u003e\n            \u003cspan class=\"reverse\"\u003e‹\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/6\"\u003e\n            \u003cspan class=\"page-number\"\u003e6\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/7\"\u003e\n            \u003cspan class=\"page-number\"\u003e7\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"current-page\"\u003e\n        \u003ca href=\"/8\"\u003e\n            \u003cspan class=\"page-number\"\u003e8\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/9\"\u003e\n            \u003cspan class=\"page-number\"\u003e9\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"page\"\u003e\n        \u003ca href=\"/10\"\u003e\n            \u003cspan class=\"page-number\"\u003e10\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"forward-page\"\u003e\n        \u003ca href=\"/11\"\u003e\n            \u003cspan class=\"forward\"\u003e›\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"last-page\"\u003e\n        \u003ca href=\"/12\"\u003e\n            \u003cspan class=\"page-number\"\u003e12\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Format\n\nPass the `format` prop a value of \"center\" and a different calculation is used for the page links. You might prefer to try that one out than read about it. But it give it some good, solid numbers: lots of pages, with a spread of 5.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Freact-router-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsequencemedia%2Freact-router-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Freact-router-pagination/lists"}