or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

advanced-customization.md index.md internationalization.md pagination.md

tile.json

tessl/npm-rc-pagination

pagination ui component for react

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/rc-pagination@5.1.x

To install, run

npx @tessl/cli install tessl/npm-rc-pagination@5.1.0

rc-pagination

Package Information

Package Name: rc-pagination
Package Type: npm
Language: TypeScript
Installation: npm install rc-pagination

Core Imports

ES6 Import:

import Pagination from 'rc-pagination';
import type { PaginationProps, PaginationLocale } from 'rc-pagination';

// CSS import (required for styling)
import 'rc-pagination/assets/index.css';

CommonJS Require:

const Pagination = require('rc-pagination');
// or
const { default: Pagination } = require('rc-pagination');

Basic Usage

import React, { useState } from 'react';
import Pagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';

function App() {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  return (
    <Pagination
      current={current}
      total={500}
      pageSize={pageSize}
      onChange={(page, size) => {
        setCurrent(page);
        setPageSize(size);
      }}
      showSizeChanger
      showQuickJumper
      showTotal={(total, range) => 
        `${range[0]}-${range[1]} of ${total} items`
      }
    />
  );
}

Architecture

The rc-pagination package provides a comprehensive React pagination component with the following key architectural elements:

Main Pagination Component: The primary Pagination component that orchestrates all pagination functionality
Internal Pager Components: Individual page button components for consistent styling and behavior
Options Components: Size changer and quick jumper controls for enhanced user interaction
Internationalization System: 60+ built-in locales with full customization support
TypeScript Support: Complete type definitions for all props, callbacks, and customization options

Core Capabilities

Pagination Component

Complete pagination component with page navigation, size changing, and customizable display options.

interface PaginationProps {
  // Core pagination
  current?: number;
  defaultCurrent?: number;
  total?: number;
  pageSize?: number;
  defaultPageSize?: number;
  onChange?: (page: number, pageSize: number) => void;
  onShowSizeChange?: (current: number, size: number) => void;
  
  // Display options
  hideOnSinglePage?: boolean;
  showSizeChanger?: boolean;
  showQuickJumper?: boolean | object;
  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
  simple?: boolean | { readOnly?: boolean };
  
  // Missing critical props
  selectPrefixCls?: string;
  totalBoundaryShowSizeChanger?: number;
  sizeChangerRender?: SizeChangerRender;
  
  // Styling and layout
  className?: string;
  style?: React.CSSProperties;
  align?: 'start' | 'center' | 'end';
  disabled?: boolean;
}

Internationalization

Complete localization support with 60+ built-in locales and customizable locale configuration.

interface PaginationLocale {
  items_per_page?: string;
  jump_to?: string;
  jump_to_confirm?: string;
  page?: string;
  prev_page?: string;
  next_page?: string;
  prev_5?: string;
  next_5?: string;
  prev_3?: string;
  next_3?: string;
  page_size?: string;
}

Advanced Customization

Advanced features including custom renderers, icons, size options, and accessibility support.

// Advanced customization options available in PaginationProps
interface PaginationAdvancedFeatures {
  // Custom renderers
  itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element: React.ReactNode) => React.ReactNode;
  sizeChangerRender?: (info: {
    disabled: boolean;
    size: number;
    onSizeChange: (value: string | number) => void;
    'aria-label': string;
    className: string;
    options: { label: string; value: string | number; }[];
  }) => React.ReactNode;
  
  // Icons customization  
  prevIcon?: React.ComponentType | React.ReactNode;
  nextIcon?: React.ComponentType | React.ReactNode;
  jumpPrevIcon?: React.ComponentType | React.ReactNode;
  jumpNextIcon?: React.ComponentType | React.ReactNode;
  
  // Size options
  pageSizeOptions?: number[];
  totalBoundaryShowSizeChanger?: number;
  
  // Advanced display
  showLessItems?: boolean;
  showPrevNextJumpers?: boolean;
  showTitle?: boolean;
}

Common Patterns

Controlled Pagination

const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(20);

<Pagination
  current={currentPage}
  pageSize={pageSize}
  total={1000}
  onChange={(page, size) => {
    setCurrentPage(page);
    setPageSize(size);
  }}
/>

Uncontrolled Pagination

<Pagination
  defaultCurrent={1}
  defaultPageSize={10}
  total={500}
  onChange={(page, pageSize) => {
    // Handle page change
    fetchData(page, pageSize);
  }}
/>

Simple Mode

<Pagination
  current={current}
  total={100}
  simple
  onChange={onChange}
/>

Custom Total Display

<Pagination
  current={current}
  total={1000}
  pageSize={20}
  showTotal={(total, range) => 
    `Showing ${range[0]} to ${range[1]} of ${total} entries`
  }
  onChange={onChange}
/>

TypeScript Integration

The package provides complete TypeScript support with exported types:

// Main component props (exported types)
export interface PaginationProps extends React.AriaAttributes {
  // Core pagination
  current?: number;
  defaultCurrent?: number;
  total?: number;
  pageSize?: number;
  defaultPageSize?: number;
  
  // Event handlers
  onChange?: (page: number, pageSize: number) => void;
  onShowSizeChange?: (current: number, size: number) => void;
  
  // Customization
  itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element: React.ReactNode) => React.ReactNode;
  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
  
  // Display and styling options
  hideOnSinglePage?: boolean;
  showSizeChanger?: boolean;
  showQuickJumper?: boolean | object;
  className?: string;
  style?: React.CSSProperties;
  align?: 'start' | 'center' | 'end';
  disabled?: boolean;
  
  // Additional configuration
  selectPrefixCls?: string;
  totalBoundaryShowSizeChanger?: number;
  sizeChangerRender?: SizeChangerRender;
  
  // Accessibility
  role?: React.AriaRole | undefined;
  
  // ... and many more options (see detailed docs)
}

// Size changer custom renderer type
export type SizeChangerRender = (info: {
  disabled: boolean;
  size: number;
  onSizeChange: (value: string | number) => void;
  'aria-label': string;
  className: string;
  options: {
    label: string;
    value: string | number;
  }[];
}) => React.ReactNode;

// Locale configuration
export interface PaginationLocale {
  items_per_page?: string;
  jump_to?: string;
  jump_to_confirm?: string;
  page?: string;
  prev_page?: string;
  next_page?: string;
  prev_5?: string;
  next_5?: string;
  prev_3?: string;
  next_3?: string;
  page_size?: string;
}

// Additional interfaces (internal, not exported)
interface PaginationData {
  className: string;
  selectPrefixCls: string;
  prefixCls: string;
  pageSizeOptions: number[];
  current: number;
  defaultCurrent: number;
  total: number;
  totalBoundaryShowSizeChanger?: number;
  pageSize: number;
  defaultPageSize: number;
  hideOnSinglePage: boolean;
  align: 'start' | 'center' | 'end';
  showSizeChanger: boolean;
  sizeChangerRender?: SizeChangerRender;
  showLessItems: boolean;
  showPrevNextJumpers: boolean;
  showQuickJumper: boolean | object;
  showTitle: boolean;
  simple: boolean | { readOnly?: boolean };
  disabled: boolean;
  locale: PaginationLocale;
  style: React.CSSProperties;
  prevIcon: React.ComponentType | React.ReactNode;
  nextIcon: React.ComponentType | React.ReactNode;
  jumpPrevIcon: React.ComponentType | React.ReactNode;
  jumpNextIcon: React.ComponentType | React.ReactNode;
}

interface PaginationState {
  current: number;
  currentInputValue: number;
  pageSize: number;
}

Defaults and Behaviors

Key default values and automatic behaviors:

Default page size: 10
Default current page: 1
Default locale: Chinese (zh_CN)
Show size changer threshold: When total > 50 (configurable via totalBoundaryShowSizeChanger)
Show previous/next jumpers: true by default
Show titles on hover: true by default

Browser and React Compatibility

React: >=16.9.0 (peer dependency)
ReactDOM: >=16.9.0 (peer dependency)
Browsers: Modern browsers with ES5+ support
SSR: Server-side rendering compatible
TypeScript: Full type definitions included