{"_id":"168dev-react-paginate","_rev":"1-499ee74c951616cb74974f856129afb9","name":"168dev-react-paginate","dist-tags":{"latest":"8.2.1"},"versions":{"8.2.0":{"name":"168dev-react-paginate","version":"8.2.0","keywords":["react-component","paginate","paginator","pagination"],"author":{"name":"168dev"},"license":"MIT","_id":"168dev-react-paginate@8.2.0","maintainers":[{"name":"kienvictory","email":"kelvin.ngovndev@gmail.com"}],"homepage":"https://github.com/AdeleD/react-paginate#readme","bugs":{"url":"https://github.com/AdeleD/react-paginate/issues"},"dist":{"shasum":"952acdb34b617abb0fbe14afa45e2b571fb1daaa","tarball":"https://registry.npmjs.org/168dev-react-paginate/-/168dev-react-paginate-8.2.0.tgz","fileCount":15,"integrity":"sha512-QPFOyMWoZaAYRV7A7erncnLiasM5aLzVYlAWPYqRRTl2hOVpfFNdrsWlw4MVeeXNk5Jn3WnSlN/gw0BwOaNZJQ==","signatures":[{"sig":"MEUCIQCZpUyEdppGOU8tyIKFGzn1hdJD2cXW7PwcZgyrq8/UyQIgK0nqprP5XDMRf/nbBgtqf/nrwSE456to0P6KHCRshDU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":122389},"main":"./dist/react-paginate.js","husky":{"hooks":{"pre-commit":"npm run lint"}},"gitHead":"099c164d33f3408c2c59ea784735007af3ecdc86","scripts":{"demo":"node demo/data.js && node demo/server.js","lint":"eslint .","test":"jest","build":"webpack --config webpack.config.js --mode=production","start":"npm run demo","format":"prettier --write .","lint:fix":"eslint . --fix","test-watch":"jest --watch"},"_npmUser":{"name":"kienvictory","email":"kelvin.ngovndev@gmail.com"},"repository":{"url":"git+https://github.com/AdeleD/react-paginate.git","type":"git"},"_npmVersion":"10.9.0","description":"A ReactJS component that creates a pagination.","directories":{},"_nodeVersion":"22.12.0","dependencies":{"prop-types":"^15"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9","react":"^19","eslint":"^9","jquery":"^3.7","core-js":"^3","express":"^4","webpack":"^5","jest-cli":"^29","prettier":"^3.4","react-dom":"^19","@babel/core":"^7","webpack-cli":"^6","babel-loader":"^9","serve-static":"^1","react-refresh":"^0.16.0","@babel/preset-env":"^7","styled-components":"^6","@babel/preset-react":"^7","eslint-plugin-react":"^7","@babel/eslint-parser":"^7","@testing-library/react":"^16","jest-environment-jsdom":"^29.7.0","webpack-dev-middleware":"^7","webpack-hot-middleware":"^2.26.1","@pmmmwh/react-refresh-webpack-plugin":"^0.5.15"},"peerDependencies":{"react":"^16 || ^17 || ^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/168dev-react-paginate_8.2.0_1737614274661_0.1565327381672712","host":"s3://npm-registry-packages-npm-production"}},"8.2.1":{"name":"168dev-react-paginate","version":"8.2.1","description":"A ReactJS component that creates a pagination work with react 19.","main":"./dist/react-paginate.js","repository":{"type":"git","url":"git+https://github.com/timomedia/168dev-react-paginate.git"},"keywords":["react-component","paginate","paginator","pagination"],"author":{"name":"168dev"},"license":"MIT","bugs":{"url":"https://github.com/timomedia/168dev-react-paginate/issues"},"dependencies":{"prop-types":"^15"},"peerDependencies":{"react":"^16 || ^17 || ^18 || ^19"},"devDependencies":{"@babel/core":"^7","@babel/eslint-parser":"^7","@babel/preset-env":"^7","@babel/preset-react":"^7","@pmmmwh/react-refresh-webpack-plugin":"^0.5.15","@testing-library/react":"^16","babel-loader":"^9","core-js":"^3","eslint":"^9","eslint-plugin-react":"^7","express":"^4","husky":"^9","jest-cli":"^29","jest-environment-jsdom":"^29.7.0","jquery":"^3.7","prettier":"^3.4","react":"^19","react-dom":"^19","react-refresh":"^0.16.0","serve-static":"^1","styled-components":"^6","webpack":"^5","webpack-cli":"^6","webpack-dev-middleware":"^7","webpack-hot-middleware":"^2.26.1"},"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"}},"_id":"168dev-react-paginate@8.2.1","gitHead":"0bfc5dca06e3b520e3c85fe946d002808a43c0a0","homepage":"https://github.com/timomedia/168dev-react-paginate#readme","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-g0q5oVXMblfFTHkW6DI4EfbHI7XKOVcKK7cdGZrQx3BaWIED3O1JiuWZwfWPRlg+3lYIdm7+hGkF9y4ebZm3sA==","shasum":"ca7115b3dbacfff28d1a988d05bc6f8c3ff2eeb7","tarball":"https://registry.npmjs.org/168dev-react-paginate/-/168dev-react-paginate-8.2.1.tgz","fileCount":16,"unpackedSize":111181,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCwz2QBYwEGiHGf5EBw27Yz4A0GoL58jrUp8xLCrBNfMAIhAPThv29CnL2hUyVhqD2uoCKbRX1Q8GZp1PpdN4CNlA58"}]},"_npmUser":{"name":"kienvictory","email":"kelvin.ngovndev@gmail.com"},"directories":{},"maintainers":[{"name":"kienvictory","email":"kelvin.ngovndev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/168dev-react-paginate_8.2.1_1737616344945_0.595443680386599"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-23T06:37:54.660Z","modified":"2025-01-23T07:12:25.304Z","8.2.0":"2025-01-23T06:37:54.844Z","8.2.1":"2025-01-23T07:12:25.118Z"},"bugs":{"url":"https://github.com/timomedia/168dev-react-paginate/issues"},"author":{"name":"168dev"},"license":"MIT","homepage":"https://github.com/timomedia/168dev-react-paginate#readme","keywords":["react-component","paginate","paginator","pagination"],"repository":{"type":"git","url":"git+https://github.com/timomedia/168dev-react-paginate.git"},"description":"A ReactJS component that creates a pagination work with react 19.","maintainers":[{"name":"kienvictory","email":"kelvin.ngovndev@gmail.com"}],"readme":"# 168dev-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<img src=\"https://cloud.githubusercontent.com/assets/2084833/24840237/7accb75a-1d1e-11e7-9abb-818431398b91.png\" alt=\"Pagination demo 2\" />\r\n\r\nor\r\n\r\n<img src=\"https://cloud.githubusercontent.com/assets/2084833/24840230/594e4ea4-1d1e-11e7-8b34-bde943b4793d.png\" alt=\"Pagination demo 1\" />\r\n\r\n## Installation\r\n\r\nInstall `168dev-react-paginate` with [npm](https://www.npmjs.com/):\r\n\r\n```\r\nnpm install 168dev-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 '168dev-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          <div>\r\n            <h3>Item #{item}</h3>\r\n          </div>\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      <Items currentItems={currentItems} />\r\n      <ReactPaginate\r\n        breakLabel=\"...\"\r\n        nextLabel=\"next >\"\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 <div id=\"container\"> to your HTML to see the component rendered.\r\nReactDOM.render(\r\n  <PaginatedItems itemsPerPage={4} />,\r\n  document.getElementById('container')\r\n);\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/168dev-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<img src=\"https://cloud.githubusercontent.com/assets/2084833/24840241/7c95b7b2-1d1e-11e7-97e3-83b9c7a1f832.gif\" alt=\"Pagination demo\" />\r\n\r\n## Contribute\r\n\r\nSee [`CONTRIBUTE.md`](/CONTRIBUTE.md)\r\n","readmeFilename":"README.md"}