{"id":15778,"library":"rc-pagination","title":"React Pagination Component","description":"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.","status":"renamed","version":"5.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/pagination","tags":["javascript","react","react-component","react-pagination","pagination","antd","pager","typescript"],"install":[{"cmd":"npm install rc-pagination","lang":"bash","label":"npm"},{"cmd":"yarn add rc-pagination","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-pagination","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for component rendering.","package":"react","optional":false},{"reason":"Peer dependency required for DOM manipulation and rendering.","package":"react-dom","optional":false}],"imports":[{"note":"The primary Pagination component is exported as a default export.","wrong":"import { Pagination } from 'rc-pagination';","symbol":"Pagination","correct":"import Pagination from 'rc-pagination';"},{"note":"Import TypeScript types for component props to leverage type checking in your project.","symbol":"PaginationProps","correct":"import type { PaginationProps } from 'rc-pagination';"},{"note":"Essential base styles are provided in a separate CSS file and must be imported to display the component correctly.","symbol":"Pagination Styles","correct":"import 'rc-pagination/assets/index.css';"},{"note":"For CommonJS environments, the component is accessed via `require` as a default export.","wrong":"const { Pagination } = require('rc-pagination');","symbol":"Pagination (CommonJS)","correct":"const Pagination = require('rc-pagination');"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Pagination from 'rc-pagination';\nimport type { PaginationProps } from 'rc-pagination';\nimport 'rc-pagination/assets/index.css'; // Don't forget to import styles!\n\nfunction App() {\n  const [current, setCurrent] = useState(1);\n  const totalItems = 100;\n  const pageSize = 10;\n\n  const onChange: PaginationProps['onChange'] = (page, pageSize) => {\n    console.log(`Page: ${page}, PageSize: ${pageSize}`);\n    setCurrent(page);\n  };\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>rc-pagination Example</h1>\n      <Pagination\n        onChange={onChange}\n        current={current}\n        total={totalItems}\n        pageSize={pageSize}\n        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}\n        showSizeChanger\n        pageSizeOptions={['10', '20', '30']}\n        showQuickJumper={{ goButton: true }}\n        locale={{ jump_to: 'Go to', page: 'Page' }}\n      />\n      <p>Current Page: {current}</p>\n      <p>Total Items: {totalItems}</p>\n    </div>\n  );\n}\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = ReactDOM.createRoot(container);\n  root.render(<App />);\n} else {\n  console.error(\"Root element not found. Please ensure an element with id 'root' exists in your HTML.\");\n}","lang":"typescript","description":"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."},"warnings":[{"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';`","message":"The `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`.","severity":"breaking","affected_versions":">=5.1.0"},{"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.","message":"The `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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure you import the default styles in your application's entry point or a relevant component file: `import 'rc-pagination/assets/index.css';`","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade your project's `react` and `react-dom` packages to version `16.9.0` or newer to ensure compatibility.","message":"Using `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.","severity":"gotcha","affected_versions":"<16.9.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"The package `rc-pagination` is not installed or the import path is incorrect. Alternatively, if migrating, the package may have been renamed.","error":"Module not found: Can't resolve 'rc-pagination'"},{"fix":"Update your code to use the `sizeChangerRender` prop for customizing the page size changer. Consult the v5 API documentation for proper usage.","cause":"You are attempting to use the `selectComponentClass` prop, which was removed in `rc-pagination` v5.0.0 and replaced by `sizeChangerRender`.","error":"Property 'selectComponentClass' does not exist on type 'PaginationProps'."},{"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.","cause":"You might be using an older `ReactDOM.render` API without a valid DOM container, or calling it incorrectly in a modern React setup.","error":"TypeError: Cannot read properties of undefined (reading 'render') or Invariant Violation: Target container is not a DOM element."}],"ecosystem":"npm"}