@rc-component/pagination

_{Part of the Ant Design ecosystem.}

📄 React pagination primitives for page navigation, size changing, quick jumping, and locale-aware controls.

## Highlights - Controlled and uncontrolled pagination state. - Page-size changer, quick jumper, simple mode, compact item count, and custom item rendering. - Locale packages exposed from `@rc-component/pagination/locale/*`. - Semantic `classNames` and `styles` for item-level customization. - TypeScript definitions for props, locale, callbacks, and state. - Used by Ant Design as the shared pagination foundation. ## Install ```bash npm install @rc-component/pagination ``` ## Usage ```tsx | pure import Pagination from '@rc-component/pagination'; import '@rc-component/pagination/assets/index.css'; export default () => ( ); ``` ```tsx | pure import Pagination from '@rc-component/pagination'; import enUS from '@rc-component/pagination/locale/en_US'; export default () => ( `${range[0]}-${range[1]} of ${total} items`} /> ); ``` ## Examples Run the local dumi site: ```bash npm install npm start ``` Then open `http://localhost:8000`. ## API ### Pagination | Property | Type | Default | Description | | ---------------------------- | ----------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | align | `'start' \| 'center' \| 'end'` | - | Align pagination items. | | className | `string` | - | Class name for the root element. | | classNames | `Partial>` | - | Semantic class names. | | current | `number` | - | Controlled current page. | | defaultCurrent | `number` | `1` | Initial current page. | | defaultPageSize | `number` | `10` | Initial page size. | | disabled | `boolean` | `false` | Disable pagination interactions. | | hideOnSinglePage | `boolean` | `false` | Hide when there is only one page. | | itemRender | `(page, type, element) => ReactNode` | - | Customize page, previous, next, and jump items. | | jumpNextIcon | `ReactNode \| ComponentType` | - | Custom next-jump icon. | | jumpPrevIcon | `ReactNode \| ComponentType` | - | Custom previous-jump icon. | | locale | `PaginationLocale` | `zh_CN` | Locale text. | | nextIcon | `ReactNode \| ComponentType` | - | Custom next icon. | | pageSize | `number` | - | Controlled page size. | | pageSizeOptions | `number[]` | - | Page-size options. | | prefixCls | `string` | `rc-pagination` | Class name prefix. | | prevIcon | `ReactNode \| ComponentType` | - | Custom previous icon. | | role | `React.AriaRole` | - | WAI-ARIA role. | | selectPrefixCls | `string` | `rc-select` | Prefix for the size changer select. | | showLessItems | `boolean` | `false` | Show fewer page items. | | showPrevNextJumpers | `boolean` | `true` | Show previous and next jumpers. | | showQuickJumper | `boolean \| object` | `false` | Show quick page jumper. | | showSizeChanger | `boolean` | `total > totalBoundaryShowSizeChanger` | Show page-size changer. | | showTitle | `boolean` | `true` | Show title on page items. | | showTotal | `(total, range) => ReactNode` | - | Render total text. | | simple | `boolean \| { readOnly?: boolean }` | `false` | Use simple pager. | | sizeChangerRender | `SizeChangerRender` | - | Customize the size changer. | | style | `React.CSSProperties` | - | Root inline style. | | styles | `Partial>` | - | Semantic styles. | | total | `number` | `0` | Total item count. | | totalBoundaryShowSizeChanger | `number` | `50` | Boundary for default `showSizeChanger`. | | onChange | `(page: number, pageSize: number, info?: { recommendPage?: number }) => void` | - | Triggered when page or page size changes. The `info.recommendPage` is only provided when pageSize changes, indicating the recommended page number based on the new page size. | | onShowSizeChange | `(current: number, size: number) => void` | - | Triggered when page size changes. | ## Development ```bash npm install npm start npm test npm run tsc npm run coverage npm run compile npm run build ``` The dumi site runs at `http://localhost:8000` by default. ## Release ```bash npm run prepublishOnly ``` The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License @rc-component/pagination is released under the [MIT](./LICENSE) license.