rc-pagination

pagination ui component for react

Usage no npm install needed!

<script type="module">
  import rcPagination from 'https://cdn.skypack.dev/rc-pagination';
</script>

README

rc-pagination

React Pagination Component.

NPM version dumi build status Test coverage codecov Dependencies DevDependencies npm download

Development

npm install
npm start

Example

http://localhost:9001

online example: https://pagination-react-component.vercel.app

Install

rc-pagination

Usage

import Pagination from 'rc-pagination';

ReactDOM.render(<Pagination />, container);

API

Parameter Description Type Default
disabled disable pagination Bool -
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 Bool false when total less then 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 Object null
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 specifict the default previous icon ReactNode | (props: PaginationProps) => ReactNode
nextIcon specifict the default previous icon ReactNode | (props: PaginationProps) => ReactNode
jumpPrevIcon specifict the default previous icon ReactNode | (props: PaginationProps) => ReactNode
jumpNextIcon specifict the default previous icon ReactNode | (props: PaginationProps) => ReactNode

License

rc-pagination is released under the MIT license.