Registry / web-framework / rc-pagination

rc-pagination

library5.1.0jsnpmunverified

rc-pagination is a highly customizable and flexible React UI component for building pagination controls. While version 5.1.0 is the current stable release under this package name, the project has formally transitioned and is actively maintained as the `@rc-component/pagination` package. This library is renowned for its extensive API, offering deep customization options for appearance and behavior, including support for internationalization, quick page jumpers, page size changers, and custom renderers for individual page items. It serves as the foundational pagination logic for prominent UI libraries such as Ant Design, emphasizing accessibility and performance. Developers initiating new projects or upgrading should use `@rc-component/pagination` for the latest features and ongoing support, as `rc-pagination` is effectively superseded by the renamed package.

web-framework

npm install rc-pagination

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RC-PAGINATION

rc-pagination

web-frameworkjavascriptv5.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Pagination

✓ import Pagination from 'rc-pagination';

✗ import { Pagination } from 'rc-pagination';

The primary Pagination component is exported as a default export.

PaginationProps

✓ import type { PaginationProps } from 'rc-pagination';

Import TypeScript types for component props to leverage type checking in your project.

Pagination Styles

✓ import 'rc-pagination/assets/index.css';

Essential base styles are provided in a separate CSS file and must be imported to display the component correctly.

Pagination (CommonJS)

✓ const Pagination = require('rc-pagination');

✗ const { Pagination } = require('rc-pagination');

For CommonJS environments, the component is accessed via `require` as a default export.

This quickstart demonstrates a basic functional React component using `rc-pagination`, managing page state, and showcasing common features like total display, size changer, and quick jumper. It includes the necessary CSS import and uses modern ReactDOM rendering.

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import Pagination from 'rc-pagination'; import type { PaginationProps } from 'rc-pagination'; import 'rc-pagination/assets/index.css'; // Don't forget to import styles! function App() { const [current, setCurrent] = useState(1); const totalItems = 100; const pageSize = 10; const onChange: PaginationProps['onChange'] = (page, pageSize) => { console.log(`Page: ${page}, PageSize: ${pageSize}`); setCurrent(page); }; return ( <div style={{ padding: '20px' }}> <h1>rc-pagination Example</h1> <Pagination onChange={onChange} current={current} total={totalItems} pageSize={pageSize} showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`} showSizeChanger pageSizeOptions={['10', '20', '30']} showQuickJumper={{ goButton: true }} locale={{ jump_to: 'Go to', page: 'Page' }} /> <p>Current Page: {current}</p> <p>Total Items: {totalItems}</p> </div> ); } const container = document.getElementById('root'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); } else { console.error("Root element not found. Please ensure an element with id 'root' exists in your HTML."); }

Debug

Known issues

breakingThe `rc-pagination` package has been renamed and is now primarily maintained under the `@rc-component/pagination` scope. While `rc-pagination` v5.1.0 is stable, new features and ongoing development will occur in the renamed package. Future migrations should target `@rc-component/pagination`.

fix

For new projects or major upgrades, install `@rc-component/pagination` instead of `rc-pagination`. Update import paths accordingly: `import Pagination from '@rc-component/pagination';`

affects: >=5.1.0

breakingThe `selectComponentClass` prop was removed in version 5.0.0 and replaced by `sizeChangerRender`. If you were using `selectComponentClass` to customize the page size changer, your component will break.

fix

Refactor your component to use the new `sizeChangerRender` prop, which accepts a function to render a custom component for the size changer. Refer to the official API documentation for usage examples.

affects: >=5.0.0

gotchaThe component's essential visual styles are not bundled with the JavaScript and require a separate CSS import. Neglecting this will result in an unstyled or poorly rendered pagination component.

fix

Ensure you import the default styles in your application's entry point or a relevant component file: `import 'rc-pagination/assets/index.css';`

affects: >=1.0.0

gotchaUsing `rc-pagination` requires `React` and `ReactDOM` peer dependencies of version `16.9.0` or higher. Older React versions may lead to runtime errors or unexpected behavior.

fix

Upgrade your project's `react` and `react-dom` packages to version `16.9.0` or newer to ensure compatibility.

affects: <16.9.0

Errors

Common errors & fixes

Module not found: Can't resolve 'rc-pagination'

The package `rc-pagination` is not installed or the import path is incorrect. Alternatively, if migrating, the package may have been renamed.

fix

Ensure the package is installed via `npm install rc-pagination` or `yarn add rc-pagination`. If you intend to use the newer version, install `@rc-component/pagination` instead and update your import statements.

Property 'selectComponentClass' does not exist on type 'PaginationProps'.

You are attempting to use the `selectComponentClass` prop, which was removed in `rc-pagination` v5.0.0 and replaced by `sizeChangerRender`.

fix

Update your code to use the `sizeChangerRender` prop for customizing the page size changer. Consult the v5 API documentation for proper usage.

TypeError: Cannot read properties of undefined (reading 'render') or Invariant Violation: Target container is not a DOM element.

You might be using an older `ReactDOM.render` API without a valid DOM container, or calling it incorrectly in a modern React setup.

fix

For modern React, ensure you have a valid DOM element (e.g., `<div id="root"></div>`) and use `ReactDOM.createRoot(container).render(<App />);` for rendering your application.

Upgrade

Version history

5.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for component rendering.

react-domrequiredPeer dependency required for DOM manipulation and rendering.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/pagination ↗

packagehttps://www.npmjs.com/package/rc-pagination ↗

homepagehttps://react-component.github.io/pagination ↗