{"_id":"@akhilv77/react-pagination","_rev":"1-78f2576837930c8f039917e40fe53e7e","name":"@akhilv77/react-pagination","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@akhilv77/react-pagination","version":"1.0.0","description":"simple and responsive pagination for react.","author":{"name":"akhilv77"},"license":"MIT","repository":{"type":"git","url":"akhilv77/@akhilv77/react-pagination"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.js","engines":{"node":">=10"},"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint .","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^16.0.0"},"devDependencies":{"microbundle-crl":"^0.13.10","babel-eslint":"^10.0.3","cross-env":"^7.0.2","eslint":"^6.8.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^14.1.0","eslint-config-standard-react":"^9.2.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^11.0.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.17.0","eslint-plugin-standard":"^4.0.1","gh-pages":"^2.2.0","npm-run-all":"^4.1.5","prettier":"^2.0.4","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.1"},"gitHead":"dabcc527e7d81aa82c09b6b103366a140e0725a5","_id":"@akhilv77/react-pagination@1.0.0","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Y0HCe8PiesG1y3Q2a/1mXYpWYgom8x0rbPBxHhLWdjYgPPeGXNV9h/0TBUB7OxmPl79JlqxlzozR+S7Q82+0NA==","shasum":"747abc42c02cb28511ebd4030bb0707ef0a4a0b7","tarball":"https://registry.npmjs.org/@akhilv77/react-pagination/-/react-pagination-1.0.0.tgz","fileCount":7,"unpackedSize":13165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrPajCRA9TVsSAnZWagAAEAAP/19znCH6kieAF1O0cMmY\nThzNXPx4KWgwS8wCzPwbdTJhSW37iXFWSz1F5Ft3QP5yJndZTg9GUZSCFZzO\n4uux5ox+cKzmxXqnUCsc5EKQqsAngltTInSzr0bzx2TBb0y1PmgmzAqDe+cH\nHxCFlFftFO3k5kBx3stwWI4V6hkSMDO9dFvJiRXdohITImb7nXYGwTBo9jam\nBXyXlKBiLx0NQI1iIu3hPRNqH2g6fP+9bPj35aPAiPgvSCgPkNMQEQflIlNm\n6wx4CXmPtEDkWJSYz7r+RTwO9BAZxU5MCD+5E/H7+GOmXcmg2dj4z5fd6o6h\nz3L+rJ64zxLKuwebsppMiatoFO2QZvMd5Mt8wki5iOMDmpFA651NMSNmypLG\n6d6SgqmHY4nwyntEB9lse0gk62b4WHTSKT7vFTFgKOcVX9NUigFU9fxbxBTY\nIpUBc99F5ieeK/KwxmjaFTQfrb6chIOq+YnlaE+g9wDqf5FUlI6fbBqbSYHT\nF5aiOKoInbHJtxZzMsDxrDjXVixMY4kTv5ZaYiDPOYlv6y08NdHDk6rKMZBw\nzFcEbJNHDAAJ7C3xgwArxV/zapi5HrzZ91gWla/LIFgqjOuDZz+f2Z/prqrn\nGzuoVAUtxDh788O/TwQXpXJEGYldHfR4usGpbxhZmvHFm88kKeqVa7W+nHVZ\nngXQ\r\n=P9lW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG8S9Fl2t5n/l739Fe7S99MKxKPrFvpRf5msEL78SJIAIhAMm4n+iKwOa9VbmIw/3ejCWS0Tcb4FdOCTpA+xLWpAWw"}]},"_npmUser":{"name":"akhilv77","email":"akhilvarma1996@gmail.com"},"directories":{},"maintainers":[{"name":"akhilv77","email":"akhilvarma1996@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pagination_1.0.0_1605170850714_0.8317515099361703"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-12T08:47:30.685Z","1.0.0":"2020-11-12T08:47:30.870Z","modified":"2022-04-04T12:29:12.789Z"},"maintainers":[{"name":"akhilv77","email":"akhilvarma1996@gmail.com"}],"description":"simple and responsive pagination for react.","repository":{"type":"git","url":"akhilv77/@akhilv77/react-pagination"},"author":{"name":"akhilv77"},"license":"MIT","readme":"# @akhilv77/react-pagination\n\n> simple and responsive pagination for react.\n\n[![NPM](https://img.shields.io/npm/v/@akhilv77/react-pagination.svg)](https://www.npmjs.com/package/@akhilv77/react-pagination) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save @akhilv77/react-pagination\n```\n\n# what is this ?\n\nGet Responsive and yet simple pagination for React .\n\n# installation\n\n`npm install @akhilv77/react-pagination --save`\n\n# usage\n\n```\n //list of items you want to render\n\n const posts=[\n    { id: \"1\", name: \"user1\" },\n    { id: \"2\", name: \"user2\" },\n    { id: \"3\", name: \"user3\" },\n    { id: \"4\", name: \"user4\" },\n    { id: \"5\", name: \"user5\" },\n    { id: \"6\", name: \"user6\" },\n    ]\n\n\n  const [currentPage, setCurrentPage] = useState(1);        //page\n  const [postsPerPage] = useState(5);                      // no of posts you want to render in one page\n\n  //get current Posts\n\n  const indexOfLastPost = currentPage * postsPerPage;\n  const indexOfFirstPost = indexOfLastPost - postsPerPage;\n  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);\n\n  // when user clicks on number this function will execute\n\n  const paginate = (number) => {\n    setCurrentPage(number);\n  };\n\n\n//map current posts to render 5 posts per page\n\n<Pagination\n  totalPosts={posts.length}\n  postsPerPage={postsPerPage}\n  paginate={paginate}\n/>\n\n```\n\n# example\n\n```\nimport React, { useState } from \"react\";\nimport \"./App.css\";\nimport { Pagination } from \"@akhilv77/react-pagination\";\n\nconst App = () => {\n  const posts = [\n    { id: \"1\", name: \"user1\" },\n    { id: \"2\", name: \"user2\" },\n    { id: \"3\", name: \"user3\" },\n    { id: \"4\", name: \"user4\" },\n    { id: \"5\", name: \"user5\" },\n    { id: \"6\", name: \"user6\" },\n    { id: \"7\", name: \"user7\" },\n    { id: \"8\", name: \"user8\" },\n    { id: \"9\", name: \"user9\" },\n    { id: \"10\", name: \"user10\" },\n    { id: \"11\", name: \"user11\" },\n    { id: \"12\", name: \"user12\" },\n    { id: \"13\", name: \"user13\" },\n    { id: \"14\", name: \"user14\" },\n    { id: \"15\", name: \"user15\" },\n    { id: \"16\", name: \"user16\" },\n    { id: \"17\", name: \"user17\" },\n    { id: \"18\", name: \"user18\" },\n    { id: \"19\", name: \"user19\" },\n    { id: \"20\", name: \"user20\" },\n  ];\n\n  const [currentPage, setCurrentPage] = useState(1);\n  const [postsPerPage] = useState(5);\n\n  //get current Posts\n\n  const indexOfLastPost = currentPage * postsPerPage;\n  const indexOfFirstPost = indexOfLastPost - postsPerPage;\n  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);\n\n  // when user clicks on number this function will execute\n\n  const paginate = (number) => {\n    setCurrentPage(number);\n  };\n\n  return (\n    <>\n      <h1>Pagination Example</h1>\n      <div style={{ width: \"300px\", textAlign: \"center\" }}>\n        {currentPosts.map((item) => {\n          return <p key={item.id}>{item.name}</p>;\n        })}\n        <Pagination\n          totalPosts={posts.length}\n          postsPerPage={postsPerPage}\n          paginate={paginate}\n        />\n      </div>\n    </>\n  );\n};\nexport default App;\n\n```\n\n# props\n\n1. totalPosts (required) //total no of posts\n\n```\n <Pagination\n    totalPosts={posts.length}\n  />\n\n```\n\n2. postsPerPage (required) // no of posts per page\n\n```\n <Pagination\n   postsPerPage={postsPerPage}\n  />\n\n```\n\npaginate (required) // when user clicks on number this function will execute and change currentPage\n\n```\n//paginate function\n\n const paginate = (number) => {\n    setCurrentPage(number);\n  };\n\n//pagination component\n\n<Pagination\n    paginate={paginate}\n />\n\n```\n\ncolor (optional) // text color\n\nbgColor (optional) // background color\n\nboxHeight (optional) // height\n\nboxWidth (optional) // width\n\njustify (optional) // justify\n\n## License\n\nMIT © [akhilv77](https://github.com/akhilv77)\n","readmeFilename":"README.md"}