{"id":17440293,"url":"https://github.com/bebraw/react-pagify","last_synced_at":"2025-04-05T22:10:52.009Z","repository":{"id":26517008,"uuid":"29969837","full_name":"bebraw/react-pagify","owner":"bebraw","description":"Simple pagination for React (MIT)","archived":false,"fork":false,"pushed_at":"2022-12-07T09:09:57.000Z","size":2532,"stargazers_count":142,"open_issues_count":6,"forks_count":31,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-12T19:02:52.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bebraw.github.io/react-pagify/","language":"JavaScript","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/bebraw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-01-28T13:57:43.000Z","updated_at":"2022-09-23T11:39:47.000Z","dependencies_parsed_at":"2023-01-14T04:50:10.036Z","dependency_job_id":null,"html_url":"https://github.com/bebraw/react-pagify","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bebraw%2Freact-pagify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bebraw%2Freact-pagify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bebraw%2Freact-pagify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bebraw%2Freact-pagify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bebraw","download_url":"https://codeload.github.com/bebraw/react-pagify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406111,"owners_count":20933806,"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":[],"created_at":"2024-10-17T14:36:04.808Z","updated_at":"2025-04-05T22:10:51.988Z","avatar_url":"https://github.com/bebraw.png","language":"JavaScript","funding_links":[],"categories":["UI components"],"sub_categories":["Miscellaneous"],"readme":"[![build status](https://secure.travis-ci.org/bebraw/react-pagify.svg)](http://travis-ci.org/bebraw/react-pagify)\n# react-pagify - Simple pagination for React\n\n*react-pagify* provides a simple API for building your own custom paginator.\n\n\u003e If you want to learn more about React, read [SurviveJS - Webpack and React](http://survivejs.com/).\n\n## Usage\n\n*react-pagify* consists of four React components: `Context`, `Segment`, `Button`, and `Ellipsis`.\n\nPagination logic can be handled through a package, such as [segmentize](https://www.npmjs.com/package/segmentize). *react-pagify* doesn't tie you to any particular solution by design, though.\n\n### `Context` and `Segment`\n\n`Context` accepts two props: `segments` and `onSelect`. A segment in turn consists of an object (`segmentName -\u003e [pageNumbers]`). `Segment` accepts matching `segmentName` through a prop and then constructs divs based on that. It also binds `onSelect` automatically so that when you click an individual page div, the page number will be passed to it as a first parameter. The second one matches with DOM event.\n\nThe example below binds `centerPage` through `Context` and `Segment`:\n\n```javascript\n...\n\nimport Paginator from 'react-pagify';\n\n...\n\n\u003cPaginator.Context className=\"pagify-pagination\"\n  segments={{\n    centerPage: [4]\n  }} onSelect={(page) =\u003e console.log(page)}\u003e\n  \u003cPaginator.Segment field=\"centerPage\" /\u003e\n\u003c/Paginator.Context\u003e\n```\n\nBoth `Context` and `Segment` accept custom props so you can customize `className` and attach custom behavior as needed. In the latter case the custom props are applied per each page `div` generated.\n\n### Usage with *segmentize*\n\n*react-pagify* doesn't deal with pagination logic itself. Instead, you can use another package, such as [segmentize](https://www.npmjs.com/package/segmentize), to deal with it. The following example demonstrates basic integration:\n\n```javascript\n...\n\nimport Paginator from 'react-pagify';\nimport segmentize from 'segmentize';\n\n...\n\n\u003cPaginator.Context className=\"pagify-pagination\"\n  segments={segmentize({\n    page: 1,\n    pages: 4,\n    sidePages: 2\n  })} onSelect={(page) =\u003e console.log(page)}\u003e\n  \u003cPaginator.Segment field=\"previousPages\" /\u003e\n  \u003cPaginator.Segment field=\"centerPage\" /\u003e\n  \u003cPaginator.Segment field=\"nextPages\" /\u003e\n\u003c/Paginator.Context\u003e\n```\n\nThe idea is the same as earlier. In this case we bind fields that *segmentize* outputs. Each of those fields contains an array of data. Refer to *segmentize* documentation for available options.\n\n### `Button`\n\nGiven it's handy to be able to implement **previous** and **next** buttons, there's a little shortcut just for that:\n\n```javascript\n...\n\nimport Paginator from 'react-pagify';\n\n...\n\n\u003cPaginator.Context className=\"pagify-pagination\"\n  segments={{\n    centerPage: [currentPage]\n  }} onSelect={(page) =\u003e console.log(page)}\u003e\n  \u003cPaginator.Button page={currentPage - 1}\u003ePrevious\u003c/Paginator.Button\u003e\n  \u003cPaginator.Button page={currentPage + 1}\u003eNext\u003c/Paginator.Button\u003e\n\u003c/Paginator.Context\u003e\n```\n\n### `Ellipsis`\n\nGiven it can be handy to be able to display ellipsis between pages of a paginator, there's a small utility known as `Ellipsis` just for this. Internally it uses comparison logic based on given `previousField` and `nextField` props. If there is room between these fields (say the values are `[1, 2]` and `[4, 5]`), it will render ellipsis. You can customize the outlook by passing custom children to it. Consider the example below:\n\n```javascript\n...\n\nimport Paginator from 'react-pagify';\nimport segmentize from 'segmentize';\n\n...\n\n\u003cPaginator.Context className=\"pagify-pagination\"\n  segments={segmentize({\n    page: 1,\n    pages: 4,\n    sidePages: 2\n  })} onSelect={(page) =\u003e console.log(page)}\u003e\n  \u003cPaginator.Segment field=\"beginPages\" /\u003e\n\n  \u003cPaginator.Ellipsis className=\"ellipsis\"\n    previousField=\"beginPages\" nextField=\"previousPages\"\u003e\n    ***\n  \u003c/Paginator.Ellipsis\u003e\n\n  \u003cPaginator.Segment field=\"previousPages\" /\u003e\n  \u003cPaginator.Segment field=\"centerPage\" /\u003e\n  \u003cPaginator.Segment field=\"nextPages\" /\u003e\n\n  \u003cPaginator.Ellipsis previousField=\"nextPages\" nextField=\"endPages\" /\u003e\n\n  \u003cPaginator.Segment field=\"endPages\" /\u003e\n\u003c/Paginator.Context\u003e\n```\n\n\u003e See `demo/` for a full implementation of the ideas discussed.\n\n### Customize Tags\n\nBy default *react-pagify* uses `div`s for container, segments and ellipses, and `span`s for links. You can customize these tags and define custom props for htme:\n\n```javascript\n...\n\nimport Paginator from 'react-pagify';\n\n...\n\n\u003cPaginator.Context className=\"pagination\"\n  tags={{\n    container: {\n      tag: 'ul'\n    },\n    segment: {\n      tag: 'li'\n    },\n    ellipsis: {\n      tag: 'li'\n    },\n    link: {\n      tag: 'a',\n      props: {\n        href: '#'\n      }\n    }\n  }}\n  segments={{\n    centerPage: [4]\n  }} onSelect={(page) =\u003e console.log(page)}\u003e\n  \u003cPaginator.Segment field=\"centerPage\" /\u003e\n\u003c/Paginator.Context\u003e\n```\n\n## Related Projects\n\n* [react-pagify-preset-bootstrap](https://www.npmjs.com/package/react-pagify-preset-bootstrap) - Bootstrap 3 preset by @sapegin.\n\n## Contributors\n\n* [rowbare](https://github.com/rowbare) - Allowed usage in Bootstrap by making `className` customizable.\n* [Nadav Spiegelman](https://github.com/nadavspi) - Added optional ellipsesClassName prop, `showPrevNext` prop.\n* [Nick Zarczynski](https://github.com/jacktrades) - Added configuration to always show prev/next buttons and allowed inactive buttons to be styled.\n* [Nimi Wariboko Jr.](https://github.com/nemothekid) - Added support for `activeClassName`.\n* [Artem Sapegin](https://github.com/sapegin) - Added `Added ellipsisButton` and `sidePages` props. Allowed paginator tags to be customized (important for Bootstrap).\n* [Frederic Heem](https://github.com/FredericHeem) - Moved lodash to `peerDependencies`.\n* [Alexander Ryzhikov](https://github.com/Coobaha) - Fixed global lodash import.\n\n## License\n\n*react-pagify* is available under MIT. See LICENSE for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbebraw%2Freact-pagify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbebraw%2Freact-pagify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbebraw%2Freact-pagify/lists"}