{"id":13422012,"url":"https://github.com/AdeleD/react-paginate","last_synced_at":"2025-03-15T10:31:36.394Z","repository":{"id":20944782,"uuid":"24233213","full_name":"AdeleD/react-paginate","owner":"AdeleD","description":"A ReactJS component that creates a pagination","archived":false,"fork":false,"pushed_at":"2024-05-11T13:24:14.000Z","size":5926,"stargazers_count":2751,"open_issues_count":59,"forks_count":627,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-14T12:02:30.418Z","etag":null,"topics":["paginate","pagination","pagination-components","paginator","react-component"],"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/AdeleD.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":"2014-09-19T14:39:10.000Z","updated_at":"2024-10-14T08:31:49.000Z","dependencies_parsed_at":"2024-06-18T10:54:36.631Z","dependency_job_id":"bd020ce0-db39-47af-850b-a05120a98c1c","html_url":"https://github.com/AdeleD/react-paginate","commit_stats":{"total_commits":585,"total_committers":71,"mean_commits":8.23943661971831,"dds":"0.40512820512820513","last_synced_commit":"099c164d33f3408c2c59ea784735007af3ecdc86"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdeleD%2Freact-paginate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdeleD%2Freact-paginate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdeleD%2Freact-paginate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdeleD%2Freact-paginate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdeleD","download_url":"https://codeload.github.com/AdeleD/react-paginate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719097,"owners_count":20336591,"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":["paginate","pagination","pagination-components","paginator","react-component"],"created_at":"2024-07-30T23:00:35.553Z","updated_at":"2025-03-15T10:31:35.781Z","avatar_url":"https://github.com/AdeleD.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Uncategorized","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Paginator","Uncategorized","Pagination"],"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:\nNote: You should write your own css to obtain this UI. This package do not provide any css.\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```\nnpm install react-paginate --save\n```\n\n## Usage\n\n```javascript\nimport React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactPaginate from 'react-paginate';\n\n// Example items, to simulate fetching from another resources.\nconst items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nfunction Items({ currentItems }) {\n  return (\n    \u003c\u003e\n      {currentItems \u0026\u0026\n        currentItems.map((item) =\u003e (\n          \u003cdiv\u003e\n            \u003ch3\u003eItem #{item}\u003c/h3\u003e\n          \u003c/div\u003e\n        ))}\n    \u003c/\u003e\n  );\n}\n\nfunction PaginatedItems({ itemsPerPage }) {\n  // Here we use item offsets; we could also use page offsets\n  // following the API or data you're working with.\n  const [itemOffset, setItemOffset] = useState(0);\n\n  // Simulate fetching items from another resources.\n  // (This could be items from props; or items loaded in a local state\n  // from an API endpoint with useEffect and useState)\n  const endOffset = itemOffset + itemsPerPage;\n  console.log(`Loading items from ${itemOffset} to ${endOffset}`);\n  const currentItems = items.slice(itemOffset, endOffset);\n  const pageCount = Math.ceil(items.length / itemsPerPage);\n\n  // Invoke when user click to request another page.\n  const handlePageClick = (event) =\u003e {\n    const newOffset = (event.selected * itemsPerPage) % items.length;\n    console.log(\n      `User requested page number ${event.selected}, which is offset ${newOffset}`\n    );\n    setItemOffset(newOffset);\n  };\n\n  return (\n    \u003c\u003e\n      \u003cItems currentItems={currentItems} /\u003e\n      \u003cReactPaginate\n        breakLabel=\"...\"\n        nextLabel=\"next \u003e\"\n        onPageChange={handlePageClick}\n        pageRangeDisplayed={5}\n        pageCount={pageCount}\n        previousLabel=\"\u003c previous\"\n        renderOnZeroPageCount={null}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n\n// Add a \u003cdiv id=\"container\"\u003e to your HTML to see the component rendered.\nReactDOM.render(\n  \u003cPaginatedItems itemsPerPage={4} /\u003e,\n  document.getElementById('container')\n);\n```\n\nTest it on [CodePen](https://codepen.io/monsieurv/pen/abyJQWQ).\n\nYou can also read the code of [demo/js/demo.js](https://github.com/AdeleD/react-paginate/blob/master/demo/js/demo.js) to quickly understand how to make `react-paginate` work with a list of objects.\n\nFinally there is this **[CodePen demo](https://codepen.io/monsieurv/pen/yLoMxYQ)**, with features fetching sample code (using GitHub API) and two synchronized pagination widgets.\n\n## Props\n\n| Name                     | Type       | Description                                                                                                                                                            |\n| ------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `pageCount`              | `Number`   | **Required.** The total number of pages.                                                                                                                               |\n| `pageRangeDisplayed`     | `Number`   | The range of pages displayed.                                                                                                                                          |\n| `marginPagesDisplayed`   | `Number`   | 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| `breakAriaLabels`        | `Shape`     | Aria labels of ellipsis elements (Default are `{ forward: 'Jump forward', backward: 'Jump backward' }`).                                                                                                                                                    |\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 changed. Exposes the current page object as an argument.                                                                             |\n| `onClick` | `Function` | A callback for any click on the component. Exposes information on the part clicked (for eg. `isNext` for next control), the next expected page `nextSelectedPage` \u0026 others. Can return `false` to prevent any page change or a number to override the page to jump to. |\n| `onPageActive`           | `Function` | The method to call when an active page is clicked. Exposes the active page object as an argument.                                                                      |\n| `initialPage`            | `Number`   | The initial page selected, in [uncontrolled mode](https://reactjs.org/docs/uncontrolled-components.html). Do not use with `forcePage` at the same time.                |\n| `forcePage`              | `Number`   | To override selected page with parent prop. Use this if you want to [control](https://reactjs.org/docs/forms.html#controlled-components) the page from your app state. |\n| `disableInitialCallback` | `boolean`  | Disable `onPageChange` callback with initial page. Default: `false`                                                                                                    |\n| `containerClassName`     | `String`   | The classname of the pagination container.                                                                                                                             |\n| `className`              | `String`   | Same as `containerClassName`. For use with [styled-components](https://styled-components.com/) \u0026 other CSS-in-JS.                                                      |\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| `pageLabelBuilder`       | `Function` | Function to set the text on page links. Defaults to `(page) =\u003e page`                                                                                                   |\n| `activeClassName`        | `String`   | The classname for the active page. It is concatenated to base class `pageClassName`.                                                                                                                                     |\n| `activeLinkClassName`    | `String`   | The classname on the active tag `a`. It is concatenated to base class `pageLinkClassName`.                                                                                                                                  |\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| `disabledLinkClassName`  | `String`   | The classname on tag `a` 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| `hrefAllControls`            | `Bool` | By default the `hrefBuilder` add `href` only to active controls. Set this prop to `true` so `href` are generated on all controls ([see](https://github.com/AdeleD/react-paginate/issues/242)).                                                                           |\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| `renderOnZeroPageCount`  | `Function` | A render function called when `pageCount` is zero. Let the Previous / Next buttons be displayed by default (`undefined`). Display nothing when `null` is provided.        |\n| `prevRel`                | `String`   | The `rel` property on the `a` tag for the prev page control. Default value `prev`. Set to `null` to disable.                                                           |\n| `nextRel`                | `String`   | The `rel` propery on the `a` tag for the next page control. Default value `next`. Set to `null` to disable.                                                            |\n| `prevPageRel`            | `String`   | The `rel` property on the `a` tag just before the selected page. Default value `prev`. Set to `null` to disable.                                                       |\n| `selectedPageRel`        | `String`   | The `rel` propery on the `a` tag for the selected page. Default value `canonical`. Set to `null` to disable.                                                           |\n| `nextPageRel`            | `String`   | The `rel` property on the `a` tag just after the selected page. Default value `next`. Set to `null` to disable.                                                        |\n\n## Demo\n\nTo run the demo locally, clone the repository and move into it:\n\n```console\ngit clone git@github.com:AdeleD/react-paginate.git\ncd react-paginate\n```\n\nInstall dependencies:\n\n```console\nnpm install\n```\n\nPrepare the demo:\n\n```console\nnpm run demo\n```\n\nRun the server:\n\n```console\nnpm run 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## Contribute\n\nSee [`CONTRIBUTE.md`](/CONTRIBUTE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdeleD%2Freact-paginate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAdeleD%2Freact-paginate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdeleD%2Freact-paginate/lists"}