rc-pagination | Npm Package Usage Trend

rc-pagination

pagination ui component for react

🌟 Show real-time usage chart on rc-pagination's README.md, just copy the code below.

## Usage Trend
[![Usage Trend of rc-pagination](https://npm-compare.com/img/npm-trend/THREE_YEARS/rc-pagination.png)](https://npm-compare.com/rc-pagination#timeRange=THREE_YEARS)

🌟 Show GitHub stars trend chart on rc-pagination's README.md, just copy the code below.

## GitHub Stars Trend
[![GitHub Stars Trend of rc-pagination](https://npm-compare.com/img/github-trend/rc-pagination.png)](https://npm-compare.com/rc-pagination)

Package	Downloads	Stars	Size	Issues	Publish	License

rc-pagination	2,097,891	673	166 kB	56	10 months ago	MIT

rc-pagination

React Pagination Component.

bundle size

Development

npm install
npm start

Examples

Online example: https://pagination-react-component.vercel.app Local example: npm run start then http://localhost:9001

Install

Usage

import Pagination from 'rc-pagination';

ReactDOM.render(<Pagination />, 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	`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
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.