{"_id":"@carlospence/react-paginate","_rev":"1-edc5ee6cd4efe0a5e1dd2fe5ca4dda16","name":"@carlospence/react-paginate","dist-tags":{"latest":"8.2.1"},"versions":{"8.2.0":{"name":"@carlospence/react-paginate","version":"8.2.0","description":"A ReactJS component that creates a pagination.","main":"./dist/react-paginate.js","repository":{"type":"git","url":"git+https://github.com/AdeleD/react-paginate.git"},"keywords":["react-component","paginate","paginator","pagination"],"author":{"name":"Adèle Delamarche"},"license":"MIT","bugs":{"url":"https://github.com/AdeleD/react-paginate/issues"},"dependencies":{"prop-types":"^15"},"peerDependencies":{"react":"^16 || ^17 || ^18"},"devDependencies":{"@babel/core":"^7","@babel/eslint-parser":"^7","@babel/preset-env":"^7","@babel/preset-react":"^7","@pmmmwh/react-refresh-webpack-plugin":"^0.5.8","@testing-library/react":"^13","babel-loader":"^9","core-js":"^3","eslint":"^7","eslint-plugin-react":"^7","express":"^4","husky":"^8","jest-cli":"^29","jest-environment-jsdom":"^29.2.2","jquery":"^3.6","prettier":"^2.7","react":"^18","react-dom":"^18","react-refresh":"^0.14.0","serve-static":"^1","styled-components":"^5","webpack":"^5","webpack-cli":"^4","webpack-dev-middleware":"^5","webpack-hot-middleware":"^2.25.2"},"scripts":{"test":"jest","test-watch":"jest --watch","build":"webpack --config webpack.config.js --mode=production","demo":"node demo/data.js && node demo/server.js","start":"npm run demo","format":"prettier --write .","lint":"eslint .","lint:fix":"eslint . --fix"},"husky":{"hooks":{"pre-commit":"npm run lint"}},"gitHead":"4f2604318d676a0ab9ce752ff82ece4122357978","homepage":"https://github.com/AdeleD/react-paginate#readme","_id":"@carlospence/react-paginate@8.2.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-EOxj4TYdFp6mQ2OqfEVDBe0UdWIgRrPyJx/pgcxOAnWyA+ZH7Yw+BFHzaRMVg6KuUTlq5oysrriUGzdxl+nzaQ==","shasum":"e46c41f80eda6357ed9ce08857016e27468bebb6","tarball":"https://registry.npmjs.org/@carlospence/react-paginate/-/react-paginate-8.2.0.tgz","fileCount":15,"unpackedSize":124284,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGG2ulcKfHzXfPDvYwiWiAICSyMFQb5WnZqR05l7uB7qAiEAu372Qp+TlhAIgcvegDyOZ0UcQx5h6dHneVOWdr45bk0="}]},"_npmUser":{"name":"carlospence","email":"carlospence@gmail.com"},"directories":{},"maintainers":[{"name":"carlospence","email":"carlospence@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-paginate_8.2.0_1696665334602_0.6256700965595399"},"_hasShrinkwrap":false},"8.2.1":{"name":"@carlospence/react-paginate","version":"8.2.1","description":"A ReactJS component that creates a pagination.","main":"./dist/react-paginate.js","repository":{"type":"git","url":"git+https://github.com/AdeleD/react-paginate.git"},"keywords":["react-component","paginate","paginator","pagination"],"author":{"name":"Adèle Delamarche"},"license":"MIT","bugs":{"url":"https://github.com/AdeleD/react-paginate/issues"},"dependencies":{"prop-types":"^15"},"peerDependencies":{"react":"^16 || ^17 || ^18"},"devDependencies":{"@babel/core":"^7","@babel/eslint-parser":"^7","@babel/preset-env":"^7","@babel/preset-react":"^7","@pmmmwh/react-refresh-webpack-plugin":"^0.5.8","@testing-library/react":"^13","babel-loader":"^9","core-js":"^3","eslint":"^7","eslint-plugin-react":"^7","express":"^4","husky":"^8","jest-cli":"^29","jest-environment-jsdom":"^29.2.2","jquery":"^3.6","prettier":"^2.7","react":"^18","react-dom":"^18","react-refresh":"^0.14.0","serve-static":"^1","styled-components":"^5","webpack":"^5","webpack-cli":"^4","webpack-dev-middleware":"^5","webpack-hot-middleware":"^2.25.2"},"scripts":{"test":"jest","test-watch":"jest --watch","build":"webpack --config webpack.config.js --mode=production","demo":"node demo/data.js && node demo/server.js","start":"npm run demo","format":"prettier --write .","lint":"eslint .","lint:fix":"eslint . --fix"},"husky":{"hooks":{"pre-commit":"npm run lint"}},"gitHead":"4f2604318d676a0ab9ce752ff82ece4122357978","homepage":"https://github.com/AdeleD/react-paginate#readme","_id":"@carlospence/react-paginate@8.2.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-7jVHNc816yGCP9Ikcft4UaV6gnLMGizxiTG7vkzlr7J8crbiJd1QOZkamvD7XV5D1eOsf6uyKfJPLqYQdR7Avw==","shasum":"f42e8ab9d8338d68e1bfd212487b82abfc6b96f4","tarball":"https://registry.npmjs.org/@carlospence/react-paginate/-/react-paginate-8.2.1.tgz","fileCount":15,"unpackedSize":124396,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9mGncSJ/f/2Svbr7dKifAdxWTtQJm359SXGjAkWriPQIhAKiLMf14PA8BIqNYYRTikT+Jzl0gCG+DLx/bGmE50ttW"}]},"_npmUser":{"name":"carlospence","email":"carlospence@gmail.com"},"directories":{},"maintainers":[{"name":"carlospence","email":"carlospence@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-paginate_8.2.1_1696685827611_0.07851346685501204"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-07T07:55:34.501Z","8.2.0":"2023-10-07T07:55:34.790Z","modified":"2023-10-07T13:37:08.018Z","8.2.1":"2023-10-07T13:37:07.838Z"},"maintainers":[{"name":"carlospence","email":"carlospence@gmail.com"}],"description":"A ReactJS component that creates a pagination.","homepage":"https://github.com/AdeleD/react-paginate#readme","keywords":["react-component","paginate","paginator","pagination"],"repository":{"type":"git","url":"git+https://github.com/AdeleD/react-paginate.git"},"author":{"name":"Adèle Delamarche"},"bugs":{"url":"https://github.com/AdeleD/react-paginate/issues"},"license":"MIT","readme":"# react-paginate\r\n\r\n[![NPM](https://nodei.co/npm/react-paginate.png?downloads=true)](https://nodei.co/npm/react-paginate/)\r\n[![Build Status](https://travis-ci.org/AdeleD/react-paginate.svg?branch=master)](https://travis-ci.org/AdeleD/react-paginate)\r\n\r\n**A ReactJS component to render a pagination.**\r\n\r\nBy installing this component and writing only a little bit of CSS you can obtain this:\r\nNote: You should write your own css to obtain this UI. This package do not provide any css.\r\n\r\n\"Pagination\r\n\r\nor\r\n\r\n\"Pagination\r\n\r\n## Installation\r\n\r\nInstall `react-paginate` with [npm](https://www.npmjs.com/):\r\n\r\n```\r\nnpm install react-paginate --save\r\n```\r\n\r\n## Usage\r\n\r\n```javascript\r\nimport React, { useEffect, useState } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport ReactPaginate from 'react-paginate';\r\n\r\n// Example items, to simulate fetching from another resources.\r\nconst items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\r\n\r\nfunction Items({ currentItems }) {\r\n return (\r\n <>\r\n {currentItems &&\r\n currentItems.map((item) => (\r\n
\r\n

Item #{item}

\r\n
\r\n ))}\r\n \r\n );\r\n}\r\n\r\nfunction PaginatedItems({ itemsPerPage }) {\r\n // Here we use item offsets; we could also use page offsets\r\n // following the API or data you're working with.\r\n const [itemOffset, setItemOffset] = useState(0);\r\n\r\n // Simulate fetching items from another resources.\r\n // (This could be items from props; or items loaded in a local state\r\n // from an API endpoint with useEffect and useState)\r\n const endOffset = itemOffset + itemsPerPage;\r\n console.log(`Loading items from ${itemOffset} to ${endOffset}`);\r\n const currentItems = items.slice(itemOffset, endOffset);\r\n const pageCount = Math.ceil(items.length / itemsPerPage);\r\n\r\n // Invoke when user click to request another page.\r\n const handlePageClick = (event) => {\r\n const newOffset = (event.selected * itemsPerPage) % items.length;\r\n console.log(\r\n `User requested page number ${event.selected}, which is offset ${newOffset}`\r\n );\r\n setItemOffset(newOffset);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \"\r\n onPageChange={handlePageClick}\r\n pageRangeDisplayed={5}\r\n pageCount={pageCount}\r\n previousLabel=\"< previous\"\r\n renderOnZeroPageCount={null}\r\n />\r\n \r\n );\r\n}\r\n\r\n// Add a
to your HTML to see the component rendered.\r\nReactDOM.render(\r\n ,\r\n document.getElementById('container')\r\n);\r\n```\r\n\r\nTest it on [CodePen](https://codepen.io/monsieurv/pen/abyJQWQ).\r\n\r\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.\r\n\r\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.\r\n\r\n## Props\r\n\r\n| Name | Type | Description |\r\n| ------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `pageCount` | `Number` | **Required.** The total number of pages. |\r\n| `pageRangeDisplayed` | `Number` | The range of pages displayed. |\r\n| `marginPagesDisplayed` | `Number` | The number of pages to display for margins. |\r\n| `previousLabel` | `Node` | Label for the `previous` button. |\r\n| `nextLabel` | `Node` | Label for the `next` button. |\r\n| `breakLabel` | `Node` | Label for ellipsis. |\r\n| `breakAriaLabels` | `Shape` | Aria labels of ellipsis elements (Default are `{ forward: 'Jump forward', backward: 'Jump backward' }`). |\r\n| `breakClassName` | `String` | The classname on tag `li` of the ellipsis element. |\r\n| `breakLinkClassName` | `String` | The classname on tag `a` of the ellipsis element. |\r\n| `onPageChange` | `Function` | The method to call when a page is changed. Exposes the current page object as an argument. |\r\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` & others. Can return `false` to prevent any page change or a number to override the page to jump to. |\r\n| `onPageActive` | `Function` | The method to call when an active page is clicked. Exposes the active page object as an argument. |\r\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. |\r\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. |\r\n| `disableInitialCallback` | `boolean` | Disable `onPageChange` callback with initial page. Default: `false` |\r\n| `containerClassName` | `String` | The classname of the pagination container. |\r\n| `className` | `String` | Same as `containerClassName`. For use with [styled-components](https://styled-components.com/) & other CSS-in-JS. |\r\n| `pageClassName` | `String` | The classname on tag `li` of each page element. |\r\n| `pageLinkClassName` | `String` | The classname on tag `a` of each page element. |\r\n| `pageLabelBuilder` | `Function` | Function to set the text on page links. Defaults to `(page) => page` |\r\n| `activeClassName` | `String` | The classname for the active page. It is concatenated to base class `pageClassName`. |\r\n| `activeLinkClassName` | `String` | The classname on the active tag `a`. It is concatenated to base class `pageLinkClassName`. |\r\n| `previousClassName` | `String` | The classname on tag `li` of the `previous` button. |\r\n| `nextClassName` | `String` | The classname on tag `li` of the `next` button. |\r\n| `previousLinkClassName` | `String` | The classname on tag `a` of the `previous` button. |\r\n| `nextLinkClassName` | `String` | The classname on tag `a` of the `next` button. |\r\n| `disabledClassName` | `String` | The classname for disabled `previous` and `next` buttons. |\r\n| `disabledLinkClassName` | `String` | The classname on tag `a` for disabled `previous` and `next` buttons. |\r\n| `hrefBuilder` | `Function` | The method is called to generate the `href` attribute value on tag `a` of each page element. |\r\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)). |\r\n| `extraAriaContext` | `String` | DEPRECATED: Extra context to add to the `aria-label` HTML attribute. |\r\n| `ariaLabelBuilder` | `Function` | The method is called to generate the `aria-label` attribute value on each page link |\r\n| `eventListener` | `String` | The event to listen onto before changing the selected page. Default is: `onClick`. |\r\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. |\r\n| `prevRel` | `String` | The `rel` property on the `a` tag for the prev page control. Default value `prev`. Set to `null` to disable. |\r\n| `nextRel` | `String` | The `rel` propery on the `a` tag for the next page control. Default value `next`. Set to `null` to disable. |\r\n| `prevPageRel` | `String` | The `rel` property on the `a` tag just before the selected page. Default value `prev`. Set to `null` to disable. |\r\n| `selectedPageRel` | `String` | The `rel` propery on the `a` tag for the selected page. Default value `canonical`. Set to `null` to disable. |\r\n| `nextPageRel` | `String` | The `rel` property on the `a` tag just after the selected page. Default value `next`. Set to `null` to disable. |\r\n\r\n## Demo\r\n\r\nTo run the demo locally, clone the repository and move into it:\r\n\r\n```console\r\ngit clone git@github.com:AdeleD/react-paginate.git\r\ncd react-paginate\r\n```\r\n\r\nInstall dependencies:\r\n\r\n```console\r\nnpm install\r\n```\r\n\r\nPrepare the demo:\r\n\r\n```console\r\nnpm run demo\r\n```\r\n\r\nRun the server:\r\n\r\n```console\r\nnpm run serve\r\n```\r\n\r\nOpen your browser and go to [http://localhost:3000/](http://localhost:3000/)\r\n\r\n\"Pagination\r\n\r\n## Contribute\r\n\r\nSee [`CONTRIBUTE.md`](/CONTRIBUTE.md)\r\n","readmeFilename":"README.md"}