{"id":20039622,"url":"https://github.com/mumer29/pagination-in-reactjs","last_synced_at":"2026-04-10T01:49:51.137Z","repository":{"id":171238934,"uuid":"320482504","full_name":"mumer29/Pagination-in-ReactJs","owner":"mumer29","description":" A ReactJS component that creates a pagination ","archived":false,"fork":false,"pushed_at":"2020-12-11T06:03:35.000Z","size":303,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T19:12:49.269Z","etag":null,"topics":["pagination","pi","react","react-pagination","reactjs"],"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/mumer29.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-11T06:03:15.000Z","updated_at":"2020-12-11T06:20:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"0b05fd5f-c8a4-4e44-89a9-99897c31dfb6","html_url":"https://github.com/mumer29/Pagination-in-ReactJs","commit_stats":null,"previous_names":["mumer29/pagination-in-reactjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mumer29%2FPagination-in-ReactJs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mumer29%2FPagination-in-ReactJs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mumer29%2FPagination-in-ReactJs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mumer29%2FPagination-in-ReactJs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mumer29","download_url":"https://codeload.github.com/mumer29/Pagination-in-ReactJs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241470341,"owners_count":19968039,"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":["pagination","pi","react","react-pagination","reactjs"],"created_at":"2024-11-13T10:38:26.894Z","updated_at":"2025-12-31T01:04:38.713Z","avatar_url":"https://github.com/mumer29.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-paginate\n\n[![NPM](https://nodei.co/npm/react-paginate.png?downloads=true)](https://nodei.co/npm/react-paginate/)\n[![Build Status](https://travis-ci.org/AdeleD/react-paginate.svg?branch=master)](https://travis-ci.org/AdeleD/react-paginate)\n\n**A ReactJS component to render a pagination.**\n\nBy installing this component and writing only a little bit of CSS you can obtain this:\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/2084833/24840237/7accb75a-1d1e-11e7-9abb-818431398b91.png\" alt=\"Pagination demo 2\" /\u003e\n\nor\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/2084833/24840230/594e4ea4-1d1e-11e7-8b34-bde943b4793d.png\" alt=\"Pagination demo 1\" /\u003e\n\n## Installation\n\nInstall `react-paginate` with [npm](https://www.npmjs.com/):\n\n```\n$ npm install react-paginate --save\n```\n\nFor [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) users:\n\n```javascript\nimport ReactPaginate from 'react-paginate';\n```\n\nRead the code of [demo/js/demo.js][1]. You will quickly understand\nhow to make `react-paginate` work with a list of objects.\n\n## Demo\n\nClone the repository and move into:\n\n```console\n$ git clone git@github.com:AdeleD/react-paginate.git\n$ cd react-paginate\n```\n\nInstall dependencies:\n\n```console\n$ make install\n```\n\nPrepare the demo:\n\n```console\n$ make demo\n```\n\nRun the server:\n\n```console\n$ make serve\n```\n\nOpen your browser and go to [http://localhost:3000/](http://localhost:3000/)\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/2084833/24840241/7c95b7b2-1d1e-11e7-97e3-83b9c7a1f832.gif\" alt=\"Pagination demo\" /\u003e\n\n## Props\n\n| Name                     | Type       | Description                                                                                  |\n| ------------------------ | ---------- | -------------------------------------------------------------------------------------------- |\n| `pageCount`              | `Number`   | **Required.** The total number of pages.                                                     |\n| `pageRangeDisplayed`     | `Number`   | **Required.** The range of pages displayed.                                                  |\n| `marginPagesDisplayed`   | `Number`   | **Required.** The number of pages to display for margins.                                    |\n| `previousLabel`          | `Node`     | Label for the `previous` button.                                                             |\n| `nextLabel`              | `Node`     | Label for the `next` button.                                                                 |\n| `breakLabel`             | `Node`     | Label for ellipsis.                                                                          |\n| `breakClassName`         | `String`   | The classname on tag `li` of the ellipsis element.                                           |\n| `breakLinkClassName`     | `String`   | The classname on tag `a` of the ellipsis element.                                            |\n| `onPageChange`           | `Function` | The method to call when a page is clicked. Exposes the current page object as an argument.   |\n| `initialPage`            | `Number`   | The initial page selected.                                                                   |\n| `forcePage`              | `Number`   | To override selected page with parent prop.                                                  |\n| `disableInitialCallback` | `boolean`  | Disable `onPageChange` callback with initial page. Default: `false`                          |\n| `containerClassName`     | `String`   | The classname of the pagination container.                                                   |\n| `pageClassName`          | `String`   | The classname on tag `li` of each page element.                                              |\n| `pageLinkClassName`      | `String`   | The classname on tag `a` of each page element.                                               |\n| `activeClassName`        | `String`   | The classname for the active page.                                                           |\n| `activeLinkClassName`    | `String`   | The classname on the active tag `a`.                                                         |\n| `previousClassName`      | `String`   | The classname on tag `li` of the `previous` button.                                          |\n| `nextClassName`          | `String`   | The classname on tag `li` of the `next` button.                                              |\n| `previousLinkClassName`  | `String`   | The classname on tag `a` of the `previous` button.                                           |\n| `nextLinkClassName`      | `String`   | The classname on tag `a` of the `next` button.                                               |\n| `disabledClassName`      | `String`   | The classname for disabled `previous` and `next` buttons.                                    |\n| `hrefBuilder`            | `Function` | The method is called to generate the `href` attribute value on tag `a` of each page element. |\n| `extraAriaContext`       | `String`   | DEPRECATED: Extra context to add to the `aria-label` HTML attribute.                         |\n| `ariaLabelBuilder`       | `Function` | The method is called to generate the `aria-label` attribute value on each page link          |\n| `eventListener`          | `String`   | The event to listen onto before changing the selected page. Default is: \"onClick\".           |\n\n## Contribute\n\n1. [Submit an issue](https://github.com/AdeleD/react-paginate/issues)\n2. Fork the repository\n3. Create a dedicated branch (never ever work in `master`)\n4. The first time, run command: `webpack` into the directory\n5. Run `npm start`\n6. Fix bugs or implement features\n7. Always write tests\n\nRun tests:\n\n```console\n$ make test\n```\n\n[1]: https://github.com/AdeleD/react-paginate/blob/master/demo/js/demo.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmumer29%2Fpagination-in-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmumer29%2Fpagination-in-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmumer29%2Fpagination-in-reactjs/lists"}