{"id":18645363,"url":"https://github.com/chototoss/react-paginating","last_synced_at":"2025-10-06T10:11:25.880Z","repository":{"id":26942486,"uuid":"111945834","full_name":"ChoTotOSS/react-paginating","owner":"ChoTotOSS","description":"Simple, lightweight, flexible pagination ReactJS component ⏮⏪1️⃣2️⃣3️⃣⏩⏭","archived":false,"fork":false,"pushed_at":"2023-01-26T23:45:12.000Z","size":2282,"stargazers_count":97,"open_issues_count":12,"forks_count":14,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-31T07:08:57.372Z","etag":null,"topics":["cypress","flowtype","function-as-child","paginate","pagination","pagination-components","paginator","react","reactjs","render-prop","render-props","seo-friendly","server-rendering","typescript"],"latest_commit_sha":null,"homepage":"https://chototoss.github.io/react-paginating/","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/ChoTotOSS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"ko_fi":"davidnguyen179"}},"created_at":"2017-11-24T18:22:44.000Z","updated_at":"2024-07-01T21:37:27.000Z","dependencies_parsed_at":"2023-02-15T03:02:11.715Z","dependency_job_id":null,"html_url":"https://github.com/ChoTotOSS/react-paginating","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Freact-paginating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Freact-paginating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Freact-paginating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChoTotOSS%2Freact-paginating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChoTotOSS","download_url":"https://codeload.github.com/ChoTotOSS/react-paginating/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247622983,"owners_count":20968575,"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":["cypress","flowtype","function-as-child","paginate","pagination","pagination-components","paginator","react","reactjs","render-prop","render-props","seo-friendly","server-rendering","typescript"],"created_at":"2024-11-07T06:15:40.346Z","updated_at":"2025-10-06T10:11:20.839Z","avatar_url":"https://github.com/ChoTotOSS.png","language":"JavaScript","funding_links":["https://ko-fi.com/davidnguyen179"],"categories":[],"sub_categories":[],"readme":"# React Paginating\n\n[![ci/cd](https://github.com/ChoTotOSS/react-paginating/workflows/ci/cd/badge.svg)](https://github.com/ChoTotOSS/react-paginating/actions) [![cypress](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/#/projects/qncx9e/runs)\n\n[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest) [![Download monthly](https://img.shields.io/npm/dm/react-paginating.svg)](https://img.shields.io/npm/dm/react-paginating.svg) [![codecov](https://codecov.io/gh/ChoTotOSS/react-paginating/branch/master/graph/badge.svg)](https://codecov.io/gh/ChoTotOSS/react-paginating) [![npm version](https://img.shields.io/npm/v/react-paginating.svg?style=flat-square)](https://badge.fury.io/js/react-paginating) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ChoTotOSS/react-paginating/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/ChoTotOSS/react-paginating/pulls)\n\n[![gzip size](http://img.badgesize.io/https://unpkg.com/react-paginating@1.2.1/dist/react-paginating.umd.min.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square)](https://unpkg.com/react-paginating@1.2.1/dist/) [![module formats](https://img.shields.io/badge/module%20formats-umd,%20cjs,%20es-green.svg?style=flat-square)](https://unpkg.com/react-paginating@1.2.1/dist/) [![Package Quality](https://npm.packagequality.com/shield/react-paginating.svg)](https://packagequality.com/#?package=react-paginating)\n\n[![Package Quality](https://npm.packagequality.com/badge/react-paginating.png)](http://packagequality.com/#?package=react-paginating)\n\n\n## Motivation\n\nDuring development, we were facing problems supporting server-rendering of our web app \u0026 SEO (require pagination links). To solve that, we had to add 2 snippets of code, one to support the server-side and another to support the client-side which lead to being hard for maintenance. Most of the pagination libraries only support client-rendering by attaching event handlers on the pagination button to redirect. Because of that, we created this library which allows flexibly to customize behaviors (attaching event handlers or href attribute) and user interface.\n\n\u003chr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6290720/33229010-d65daf4a-d1f8-11e7-851a-7d3e0d454b48.gif\" /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\nThe component applied `Render Props` pattern. (You can read more\nabout this pattern\n[here](https://reactjs.org/docs/render-props.html)).\n\nThis approach allows you to fully control UI component and behaviours.\n\n\u003e See [the intro blog post](https://medium.com/chotot/introducing-react-paginating-9128f30f1f6b)\n\n## Table content\n\n* [Installation](https://github.com/ChoTotOSS/react-paginating#installation)\n* [Usage](https://github.com/ChoTotOSS/react-paginating#usage)\n* [Examples](https://github.com/ChoTotOSS/react-paginating#examples)\n* [Input Props](https://github.com/ChoTotOSS/react-paginating#input-props)\n* [Child callback functions](https://github.com/ChoTotOSS/react-paginating#child-callback-functions)\n* [Controlled Props](https://github.com/ChoTotOSS/react-paginating#controlled-props)\n* [Alternatives](https://github.com/ChoTotOSS/react-paginating#alternatives)\n\n## Installation\n\n```bash\nnpm install --save react-paginating\n```\n\nor\n\n```bash\nyarn add react-paginating\n```\n\n## Usage\n\nYou can check out the basic demo here:\n- Javascript: [https://codesandbox.io/s/z2rr7z23ol](https://codesandbox.io/s/z2rr7z23ol)\n- Typescript: [https://codesandbox.io/s/9252p34v8r](https://codesandbox.io/s/9252p34v8r)\n- Server-Side Rendering: [https://codesandbox.io/s/vq40kw1yn5](https://codesandbox.io/s/vq40kw1yn5)\n\n```css\n.bg-red {\n  background-color: red;\n}\n```\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport Pagination from 'react-paginating';\n\nconst fruits = [\n  ['apple', 'orange'],\n  ['banana', 'avocado'],\n  ['coconut', 'blueberry'],\n  ['payaya', 'peach'],\n  ['pear', 'plum']\n];\nconst limit = 2;\nconst pageCount = 3;\nconst total = fruits.length * limit;\n\nclass App extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      currentPage: 1\n    };\n  }\n\n  handlePageChange = (page, e) =\u003e {\n    this.setState({\n      currentPage: page\n    });\n  };\n\n  render() {\n    const { currentPage } = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          {fruits[currentPage - 1].map(item =\u003e \u003cli key={item}\u003e{item}\u003c/li\u003e)}\n        \u003c/ul\u003e\n        \u003cPagination\n          className=\"bg-red\"\n          total={total}\n          limit={limit}\n          pageCount={pageCount}\n          currentPage={currentPage}\n        \u003e\n          {({\n            pages,\n            currentPage,\n            hasNextPage,\n            hasPreviousPage,\n            previousPage,\n            nextPage,\n            totalPages,\n            getPageItemProps\n          }) =\u003e (\n            \u003cdiv\u003e\n              \u003cbutton\n                {...getPageItemProps({\n                  pageValue: 1,\n                  onPageChange: this.handlePageChange\n                })}\n              \u003e\n                first\n              \u003c/button\u003e\n\n              {hasPreviousPage \u0026\u0026 (\n                \u003cbutton\n                  {...getPageItemProps({\n                    pageValue: previousPage,\n                    onPageChange: this.handlePageChange\n                  })}\n                \u003e\n                  {'\u003c'}\n                \u003c/button\u003e\n              )}\n\n              {pages.map(page =\u003e {\n                let activePage = null;\n                if (currentPage === page) {\n                  activePage = { backgroundColor: '#fdce09' };\n                }\n                return (\n                  \u003cbutton\n                    {...getPageItemProps({\n                      pageValue: page,\n                      key: page,\n                      style: activePage,\n                      onPageChange: this.handlePageChange\n                    })}\n                  \u003e\n                    {page}\n                  \u003c/button\u003e\n                );\n              })}\n\n              {hasNextPage \u0026\u0026 (\n                \u003cbutton\n                  {...getPageItemProps({\n                    pageValue: nextPage,\n                    onPageChange: this.handlePageChange\n                  })}\n                \u003e\n                  {'\u003e'}\n                \u003c/button\u003e\n              )}\n\n              \u003cbutton\n                {...getPageItemProps({\n                  pageValue: totalPages,\n                  onPageChange: this.handlePageChange\n                })}\n              \u003e\n                last\n              \u003c/button\u003e\n            \u003c/div\u003e\n          )}\n        \u003c/Pagination\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n## Examples\n\n* [withClientSideRendering](https://github.com/ChoTotOSS/react-paginating/tree/hook/examples/withClientSideRendering)\n* [withServerSideRendering](https://github.com/ChoTotOSS/react-paginating/tree/hook/examples/withServerSideRendering)\n\n## Input Props\n\n### total\n\n\u003e `number`\n\nTotal results\n\n### className\n\n\u003e `string`\n\nCustomizable style for pagination wrapper\n\n### limit\n\n\u003e `number`\n\nNumber of results per page\n\n### pageCount\n\n\u003e `number`\n\nHow many pages number you want to display in pagination zone.\n\n### currentPage\n\n\u003e `number`\n\nCurrent page number\n\n## Child callback functions\n\n### getPageItemProps\n\n\u003e `function({ pageValue: number, onPageChange: func })`\n\nAllow to pass props and event to page item. When page is clicked, `onPageChange`\nwill be executed with param value `pageValue`.\n\n**Note:** This callback function should only use for paging with state change.\nIf you prefer parsing page value from `query` url (**Please don't use this\ncallback function**).\n\n## Controlled Props\n\n### pages\n\n\u003e `array: [number]`\n\nList of pages number will be displayed. E.g: [1, 2, 3, 4, 5]\n\n### currentPage\n\n\u003e `number`\n\n### previousPage\n\n\u003e `number`\n\n### nextPage\n\n\u003e `number`\n\n### totalPages\n\n\u003e `number`\n\n### hasNextPage\n\n\u003e `boolean`\n\nCheck if it has `next page` or not.\n\n### hasPreviousPage\n\n\u003e `boolean`\n\nCheck if it has `previous page` or not.\n\n## Alternatives\n\nIf you don’t agree with the choices made in this project, you might want to\nexplore alternatives with different tradeoffs. Some of the more popular and\nactively maintained ones are:\n\n* [react-paginate](https://github.com/AdeleD/react-paginate)\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.dzungnguyen.dev/about\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6290720?s=460\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDzung Nguyen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/davidnguyen179/react-paginating/commits?author=davidnguyen179\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/davidnguyen179/react-paginating/commits?author=davidnguyen179\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-davidnguyen179\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/davidnguyen179/react-paginating/pulls?q=is%3Apr+reviewed-by%3Adavidnguyen179\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/davidnguyen179/react-paginating/issues?q=author%3Adavidnguyen179\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://nartc.netlify.com/about\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/25516557?s=460\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChau Tran\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/davidnguyen179/react-paginating/commits?author=nartc\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-nartc\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/davidnguyen179/react-paginating/pulls?q=is%3Apr+reviewed-by%3Anartc\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/davidnguyen179/react-paginating/issues?q=author%3Anartc\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/abusada\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2572320?s=460\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFaris Abusada\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/davidnguyen179/react-paginating/commits?author=abusada\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/davidnguyen179/react-paginating/issues?q=author%3Aabusada\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchototoss%2Freact-paginating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchototoss%2Freact-paginating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchototoss%2Freact-paginating/lists"}