{"_id":"@astrum-ui/paginate","_rev":"3-96d0f91cdcf9f0d18dcc39e6d97f90ee","time":{"created":"2024-04-16T07:09:51.649Z","1.0.0":"2024-04-16T06:54:48.363Z","modified":"2024-04-16T07:19:51.193Z","1.0.1":"2024-04-16T07:09:51.905Z","1.0.2":"2024-04-16T07:19:51.001Z"},"name":"@astrum-ui/paginate","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@astrum-ui/paginate","version":"1.0.1","description":"Introducing Astrum-UI/Paginate: A versatile React component for creating paginated lists with ease.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["paginate","pagination","react","component","react-paginate","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-paginate.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-paginate/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-paginate#readme","license":"ISC","devDependencies":{"@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.77","cssnano":"^6.1.2","cssnext":"^1.8.5","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.14.2","rollup-plugin-postcss":"^4.0.2"},"_id":"@astrum-ui/paginate@1.0.1","gitHead":"2b4d711a7d4c77533f830ae4ff85f00ad240d87d","_nodeVersion":"21.7.3","_npmVersion":"10.5.0","dist":{"integrity":"sha512-qNw8XAQsRJ8BYTrYYhph/Neizyzbav/pxxX0TkSTo4qc1xKPHEdup1YYIRwApTS0Ut6M8dg8SiLAxLn7ejkl2w==","shasum":"32e9d0d115c060ef021f40a9e0069706ec3b9e90","tarball":"https://registry.npmjs.org/@astrum-ui/paginate/-/paginate-1.0.1.tgz","fileCount":3,"unpackedSize":12409,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZxDA37qD1MTgWNDmgxMXK5hCWecNgRwsAh0bz0yCUAgIhAOrGApPlBQ30ycEVAQJzsFO0/DfzkNYYrLbrNMCR7pd9"}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paginate_1.0.1_1713251391767_0.7952376185813776"},"_hasShrinkwrap":false},"1.0.2":{"name":"@astrum-ui/paginate","version":"1.0.2","description":"Introducing Astrum-UI/Paginate: A versatile React component for creating paginated lists with ease.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["paginate","pagination","react","component","react-paginate","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-paginate.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-paginate/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-paginate#readme","license":"ISC","devDependencies":{"@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.77","cssnano":"^6.1.2","cssnext":"^1.8.5","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.14.2","rollup-plugin-postcss":"^4.0.2"},"_id":"@astrum-ui/paginate@1.0.2","gitHead":"2b4d711a7d4c77533f830ae4ff85f00ad240d87d","_nodeVersion":"21.7.3","_npmVersion":"10.5.0","dist":{"integrity":"sha512-hINmd4hHW8Pq/DRpqhSv/BJVFtHTBsG/AxXPw50zki18qpZVDeusQvosTyIViUImgWf09ZDyR5p25RQ/4Rjz7g==","shasum":"e012eb1b327d1cab15f20ee53124468c1c493325","tarball":"https://registry.npmjs.org/@astrum-ui/paginate/-/paginate-1.0.2.tgz","fileCount":18,"unpackedSize":182817,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLb1HkPTXkwNhx/XCR+roYMdH5OJM2q2r7odbXpEZX4AIhAJGYF30xJEnvwdK6DCuoQBWs99Zu85IMgv3d/EOiC4Dz"}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paginate_1.0.2_1713251990785_0.295058414752684"},"_hasShrinkwrap":false}},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"description":"Introducing Astrum-UI/Paginate: A versatile React component for creating paginated lists with ease.","homepage":"https://github.com/Sagar969/astrum-ui-paginate#readme","keywords":["paginate","pagination","react","component","react-paginate","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-paginate.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-paginate/issues"},"license":"ISC","readme":"# @astrum-ui/paginate\r\n\r\nIntroducing Astrum-UI/Paginate: A versatile React component for creating paginated lists with ease.\r\n\r\n## Installation\r\n\r\n```\r\nnpm install --save @astrum-ui/paginate\r\n```\r\n\r\nor access the [complete suite](https://www.npmjs.com/package/@astrum-ui/core) of components\r\n\r\n```\r\nnpm install --save @astrum-ui/core\r\n```\r\n\r\n## Variants\r\n\r\nThere are two variants of pagination buttons\r\n\r\n
\r\n\"variant\r\n\"variant\r\n
\r\n\r\n## Usage\r\n\r\n#### Basic example\r\n\r\n```jsx\r\nimport Paginate from @astrum-ui/paginate\r\nimport { useState } from 'react'\r\n\r\nconst Card = ({ cardData }) => {\r\n return (\r\n
\r\n

{cardData.name}

\r\n
\r\n )\r\n}\r\n\r\nexport default function HelloModal() {\r\n const [data, setData] = useState([\r\n { name: 'Card 1' },\r\n { name: 'Card 2' },\r\n { name: 'Card 3' },\r\n ])\r\n\r\n return (\r\n }\r\n />\r\n )\r\n}\r\n\r\n```\r\n\r\n#### More examples\r\n\r\n- [Blog Cards](https://stackblitz.com/edit/vitejs-vite-z8kb2c?file=src%2FApp.tsx)\r\n\r\n## Options\r\n\r\nHere's a list of all the options available to customize this component according to your need\r\n\r\n`* for required`\r\n`- for any value of specified type`\r\n\r\n| Name | Type | Default Value | Available Values | Description |\r\n| --------------- | :------: | :-----------: | :--------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------- |\r\n| items \\* | array | [] | - | An array of items to be paginated |\r\n| itemsPerPage \\* | number | 10 | - | Number of items to display per page |\r\n| renderItem \\* | callback | () => <> | - | Callback function that renders each item in the pagination. Defaults to an empty JSX element |\r\n| onNoItem | callback | () => No item | - | Callback function called when there are no items to display |\r\n| variant | number | 1 | 1, 2 | The variant of pagination style to use. Can be either 1 or 2 |\r\n| activePage | number | 1 | - | To set active page number at any time |\r\n| onPageChange | callback | () => {} | - | A callback function called when the active page changes |\r\n| styles | object | {} | { `container: {}`, `button: {}`, `buttonContainer: {}`, `activeButton: {}` } | custom styles for different parts of the pagination component. `activeButton` will be applied in variant 2 |\r\n| classNames | object | {} | { `container: \"\"`, `button: \"\"`, `buttonContainer: \"\"` } | custom classes for different parts of the pagination component |\r\n","readmeFilename":"README.md"}