{"id":16231845,"url":"https://github.com/smakosh/react-hot-pagination","last_synced_at":"2025-03-19T14:30:52.381Z","repository":{"id":51169792,"uuid":"368614166","full_name":"smakosh/react-hot-pagination","owner":"smakosh","description":"A React component to render your pagination navigation","archived":false,"fork":false,"pushed_at":"2021-05-20T21:06:54.000Z","size":526,"stargazers_count":34,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T08:06:28.810Z","etag":null,"topics":["pagination","react","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-hot-pagination","language":"TypeScript","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/smakosh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-18T17:27:39.000Z","updated_at":"2025-03-09T01:41:26.000Z","dependencies_parsed_at":"2022-09-15T22:12:28.204Z","dependency_job_id":null,"html_url":"https://github.com/smakosh/react-hot-pagination","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smakosh%2Freact-hot-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smakosh%2Freact-hot-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smakosh%2Freact-hot-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smakosh%2Freact-hot-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smakosh","download_url":"https://codeload.github.com/smakosh/react-hot-pagination/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244444468,"owners_count":20453729,"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":["pagination","react","typescript"],"created_at":"2024-10-10T13:06:57.079Z","updated_at":"2025-03-19T14:30:52.052Z","avatar_url":"https://github.com/smakosh.png","language":"TypeScript","funding_links":["https://www.patreon.com/smakosh"],"categories":[],"sub_categories":[],"readme":"# react-hot-pagination\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![npm package][npm-badge]][npm]\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/react-hot-pagination\n\n## Example\n\n```tsx\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Paginate } from 'react-hot-pagination';\n\nconst App = () =\u003e {\n  const [current, setCurrent] = React.useState(1);\n\n  const handlePagination = (value: number) =\u003e setCurrent(value);\n\n  return (\n    \u003cdiv\u003e\n      \u003cPaginate\n        current={current}\n        handlePagination={handlePagination}\n        range={2}\n        total={30}\n        components={{}}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n## Getting started\n\n```bash\nnpm i react-hot-pagination\n```\n\nOr\n\n```bash\nyarn add react-hot-pagination\n```\n\n## Props\n\n### Paginate\n\nThese docs are inspired by react-flex-ready docs\n\nrange\ntotal\ncurrent\n\n| Option           | Default | Type                      | Description                                                 |\n| ---------------- | ------- | ------------------------- | ----------------------------------------------------------- |\n| range            | 2       | {number}                  | Pages shown before after the current page                   |\n| total            | 20      | {number}                  | Total pages                                                 |\n| current          | 1       | {number}                  | Current page                                                |\n| components       |         | {object}                  | your Button, Separator, LeftArrow and RightArrow components |\n| handlePagination |         | {(value: number) =\u003e void} | Your custom handle function to update the current page      |\n\n## Built with\n\n- TSDX\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Contributors\n\n- [Myself](https://smakosh.com)\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Elbarae1921\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/44276243?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eElbarae Rguig\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smakosh/react-hot-pagination/commits?author=Elbarae1921\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/smakosh/react-hot-pagination/commits?author=Elbarae1921\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/fdrissi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/43388336?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDRISSI TOUBBALI Fadel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/smakosh/react-hot-pagination/commits?author=fdrissi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n## Todo\n\n- [ ] Add more examples\n\n## Support\n\nIf you love this React component and want to support me, you can do so through my Patreon or GitHub sponsors.\n\n[![Support me on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/smakosh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmakosh%2Freact-hot-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmakosh%2Freact-hot-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmakosh%2Freact-hot-pagination/lists"}