# rc-pagination > pagination ui component for react Latest version **5.1.0** (published 2025-01-27) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-pagination pnpm add rc-pagination yarn add rc-pagination bun add rc-pagination ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 5.1.0 | | Published | 2025-01-27 | | First published | 2015-07-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 161.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 674 | | Maintainers | ibigbug, benjycui, yesmeck, afc163, yiminghe, yutingzhao1991, paranoidjk, zombiej, shaodahong, madccc | | Keywords | react, react-component, react-pagination, pagination, antd, pager | ## Links - npm: https://www.npmjs.com/package/rc-pagination - Repository: https://github.com/react-component/pagination - Homepage: https://react-component.github.io/pagination - Issues: http://github.com/react-component/pagination/issues - npm.io page: https://npm.io/package/rc-pagination ## Dependencies (3) - [rc-util](https://npm.io/package/rc-util.md) ^5.38.0 - [classnames](https://npm.io/package/classnames.md) ^2.3.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 5.1.0 (latest) — 2025-01-27 - 5.0.0 — 2024-12-10 - 5.0.0-0 — 2024-12-10 - 4.3.0 — 2024-09-22 - 4.2.0 — 2024-06-22 - 4.1.0 — 2024-05-23 - 4.0.4 — 2023-12-28 - 4.0.3 — 2023-12-11 - 4.0.2 — 2023-12-08 - 4.0.1 — 2023-12-01 - 4.0.0 — 2023-11-28 - 3.7.0 — 2023-10-26 - 3.6.1 — 2023-08-15 - 3.6.0 — 2023-08-15 - 3.5.0 — 2023-05-28 - … 190 more at https://npm.io/package/rc-pagination/versions ## README # rc-pagination React Pagination Component. [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] [npm-image]: http://img.shields.io/npm/v/rc-pagination.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-pagination [github-actions-image]: https://github.com/react-component/pagination/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/pagination/actions [codecov-image]: https://img.shields.io/codecov/c/github/react-component/pagination/master.svg?style=flat-square [codecov-url]: https://codecov.io/gh/react-component/pagination/branch/master [david-url]: https://david-dm.org/react-component/pagination [david-image]: https://david-dm.org/react-component/pagination/status.svg?style=flat-square [david-dev-url]: https://david-dm.org/react-component/pagination?type=dev [david-dev-image]: https://david-dm.org/react-component/pagination/dev-status.svg?style=flat-square [download-image]: https://img.shields.io/npm/dm/rc-pagination.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-pagination [bundlephobia-url]: https://bundlephobia.com/result?p=rc-pagination [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-pagination [dumi-url]: https://github.com/umijs/dumi [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square ## Development ``` npm install npm start ``` ## Examples Online example: `https://pagination-react-component.vercel.app` Local example: `npm run start` then `http://localhost:9001` ## Install [![rc-pagination](https://nodei.co/npm/rc-pagination.png)](https://npmjs.org/package/rc-pagination) ## Usage ```js import Pagination from 'rc-pagination'; ReactDOM.render(, container); ``` ## API // prettier-ignore | Parameter | Description | Type | Default | | --- | --- | --- | --- | | disabled | disable pagination | Bool | - | | align | align of pagination | start \| center \| end | undefined | | defaultCurrent | uncontrolled current page | Number | 1 | | current | current page | Number | undefined | | total | items total count | Number | 0 | | defaultPageSize | default items per page | Number | 10 | | pageSize | items per page | Number | 10 | | onChange | page change callback | Function(current, pageSize) | - | | showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `false` when total less than `totalBoundaryShowSizeChanger`, `true` when otherwise | | totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 | | pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '50', '100'] | | onShowSizeChange | pageSize change callback | Function(current, size) | - | | hideOnSinglePage | hide on single page | Bool | false | | showPrevNextJumpers | show jump-prev, jump-next | Bool | true | | showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} | | showTotal | show total records and range | Function(total, [from, to]) | - | | className | className of pagination | String | - | | simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - | | locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) | | style | the style of pagination | Object | {} | | showLessItems | show less page items | Bool | false | | showTitle | show page items title | Bool | true | | itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | | | prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | | nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | | | jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | | jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | | ## License rc-pagination is released under the MIT license. --- _Source: https://npm.io/package/rc-pagination · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._