React Pagination Component

Common errors

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

  cause 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'.

  cause 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.

  cause 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.

Warnings

• breaking 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`.
  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';`
• breaking 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.
  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.
• gotcha 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.
  Fix: Ensure you import the default styles in your application's entry point or a relevant component file: `import 'rc-pagination/assets/index.css';`
• gotcha 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.
  Fix: Upgrade your project's `react` and `react-dom` packages to version `16.9.0` or newer to ensure compatibility.

Install

• npm install rc-pagination npm
• yarn add rc-pagination yarn
• pnpm add rc-pagination pnpm

Imports

• Pagination
  wrong:

  import { Pagination } from 'rc-pagination';

  correct:

  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)
  wrong:

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

  correct:

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

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

Quickstart

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.");
}