tessl/npm-rc-pagination

pagination ui component for react

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Internationalization

Name: tessl/npm-rc-pagination
Author: tessl

The rc-pagination component provides comprehensive internationalization (i18n) support with 60+ built-in locales and full customization capabilities for all user-facing text.

Import

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

// Import specific locales as needed
import zhCN from 'rc-pagination/lib/locale/zh_CN';
import enUS from 'rc-pagination/lib/locale/en_US';
import jaJP from 'rc-pagination/lib/locale/ja_JP';

Locale Interface

/**
 * Pagination locale configuration interface
 * All properties are optional - missing properties will fall back to defaults
 */
interface PaginationLocale {
  // Size changer options
  items_per_page?: string;    // Text for "/ page" or items per page indicator
  page_size?: string;         // Text for "Page Size" label
  
  // Quick jumper
  jump_to?: string;          // Text for "Go to" or "Jump to" label
  jump_to_confirm?: string;  // Text for confirmation button (e.g., "confirm", "go")
  page?: string;             // Text for "Page" label
  
  // Navigation buttons
  prev_page?: string;        // Text for previous page button
  next_page?: string;        // Text for next page button
  prev_5?: string;          // Text for "Previous 5 Pages" tooltip
  next_5?: string;          // Text for "Next 5 Pages" tooltip  
  prev_3?: string;          // Text for "Previous 3 Pages" tooltip
  next_3?: string;          // Text for "Next 3 Pages" tooltip
}

Built-in Locales

The package includes 60+ pre-configured locales covering major world languages:

Major Locales (Common Usage)

// English locales
import enUS from 'rc-pagination/lib/locale/en_US';
import enGB from 'rc-pagination/lib/locale/en_GB';

// Chinese locales  
import zhCN from 'rc-pagination/lib/locale/zh_CN';
import zhTW from 'rc-pagination/lib/locale/zh_TW';

// European locales
import deDe from 'rc-pagination/lib/locale/de_DE';
import frFR from 'rc-pagination/lib/locale/fr_FR';
import esES from 'rc-pagination/lib/locale/es_ES';
import itIT from 'rc-pagination/lib/locale/it_IT';
import ptBR from 'rc-pagination/lib/locale/pt_BR';
import ruRU from 'rc-pagination/lib/locale/ru_RU';

// Asian locales
import jaJP from 'rc-pagination/lib/locale/ja_JP';
import koKR from 'rc-pagination/lib/locale/ko_KR';
import hiIN from 'rc-pagination/lib/locale/hi_IN';
import thTH from 'rc-pagination/lib/locale/th_TH';
import viVN from 'rc-pagination/lib/locale/vi_VN';

Complete Locale List

Available locales include:

European Languages:

da_DK (Danish), nl_NL (Dutch), nl_BE (Dutch Belgium)
fi_FI (Finnish), fr_BE (French Belgium), fr_CA (French Canada)
de_DE (German), el_GR (Greek), hu_HU (Hungarian)
is_IS (Icelandic), ga_IE (Irish), it_IT (Italian)
lv_LV (Latvian), lt_LT (Lithuanian), nb_NO (Norwegian)
pl_PL (Polish), pt_PT (Portuguese), ro_RO (Romanian)
sk_SK (Slovak), sl_SI (Slovenian), sv_SE (Swedish)
cs_CZ (Czech), hr_HR (Croatian), et_EE (Estonian)

Asian Languages:

bn_BD (Bengali), hi_IN (Hindi), kn_IN (Kannada)
ml_IN (Malayalam), pa_IN (Punjabi), ta_IN (Tamil)
id_ID (Indonesian), ms_MY (Malay), th_TH (Thai)
vi_VN (Vietnamese), km_KH (Khmer), my_MM (Myanmar)
ne_NP (Nepali), si_LK (Sinhala)

Middle Eastern & African:

ar_EG (Arabic), he_IL (Hebrew), fa_IR (Persian)
tr_TR (Turkish), ur_PK (Urdu), am (Amharic)

Other Languages:

az_AZ (Azerbaijani), bg_BG (Bulgarian), by_BY (Belarusian)
ca_ES (Catalan), eu_ES (Basque), gl_ES (Galician)
ka_GE (Georgian), kk_KZ (Kazakh), kmr_IQ (Kurdish)
mk_MK (Macedonian), mn_MN (Mongolian), sr_RS (Serbian)
tk_TK (Turkmen), ug_CN (Uyghur), uk_UA (Ukrainian)
uz_UZ (Uzbek)

Usage Examples

Using Built-in Locales

import React from 'react';
import Pagination from 'rc-pagination';
import zhCN from 'rc-pagination/lib/locale/zh_CN';

function ChinesePagination() {
  return (
    <Pagination
      current={1}
      total={500}
      locale={zhCN}
      showSizeChanger
      showQuickJumper
      onChange={(page, pageSize) => {
        console.log(`页面: ${page}, 大小: ${pageSize}`);
      }}
    />
  );
}

Multiple Language Support

import React, { useState } from 'react';
import Pagination from 'rc-pagination';
import enUS from 'rc-pagination/lib/locale/en_US';
import zhCN from 'rc-pagination/lib/locale/zh_CN';
import jaJP from 'rc-pagination/lib/locale/ja_JP';
import frFR from 'rc-pagination/lib/locale/fr_FR';

const locales = {
  'en-US': enUS,
  'zh-CN': zhCN,
  'ja-JP': jaJP,
  'fr-FR': frFR,
};

function MultiLanguagePagination() {
  const [language, setLanguage] = useState('en-US');
  const [current, setCurrent] = useState(1);

  return (
    <div>
      <select 
        value={language} 
        onChange={(e) => setLanguage(e.target.value)}
      >
        <option value="en-US">English (US)</option>
        <option value="zh-CN">中文 (简体)</option>
        <option value="ja-JP">日本語</option>
        <option value="fr-FR">Français</option>
      </select>
      
      <Pagination
        current={current}
        total={1000}
        locale={locales[language]}
        showSizeChanger
        showQuickJumper
        showTotal={(total, range) => {
          // You might want to localize this text too
          if (language === 'zh-CN') {
            return `第 ${range[0]}-${range[1]} 条，共 ${total} 条`;
          }
          return `${range[0]}-${range[1]} of ${total} items`;
        }}
        onChange={setCurrent}
      />
    </div>
  );
}

Custom Locale Configuration

import React from 'react';
import Pagination from 'rc-pagination';
import type { PaginationLocale } from 'rc-pagination';

// Create custom locale
const customLocale: PaginationLocale = {
  items_per_page: '/ página',
  jump_to: 'Ir a',
  jump_to_confirm: 'confirmar',
  page: 'Página',
  prev_page: 'Página Anterior',
  next_page: 'Página Siguiente',
  prev_5: '5 Páginas Anteriores',
  next_5: '5 Páginas Siguientes',
  prev_3: '3 Páginas Anteriores', 
  next_3: '3 Páginas Siguientes',
  page_size: 'Tamaño de Página',
};

function SpanishPagination() {
  return (
    <Pagination
      current={1}
      total={500}
      locale={customLocale}
      showSizeChanger
      showQuickJumper
      showTotal={(total, range) => 
        `${range[0]}-${range[1]} de ${total} elementos`
      }
      onChange={(page, pageSize) => {
        console.log(`Página: ${page}, Tamaño: ${pageSize}`);
      }}
    />
  );
}

Extending Built-in Locales

import React from 'react';
import Pagination from 'rc-pagination';
import enUS from 'rc-pagination/lib/locale/en_US';
import type { PaginationLocale } from 'rc-pagination';

// Extend existing locale with custom text
const customEnglish: PaginationLocale = {
  ...enUS,
  items_per_page: '/ per page',
  jump_to: 'Jump to page',
  page_size: 'Items per page',
};

function CustomEnglishPagination() {
  return (
    <Pagination
      current={1}
      total={1000}
      locale={customEnglish}
      showSizeChanger
      showQuickJumper
      onChange={(page, pageSize) => {
        // Handle change
      }}
    />
  );
}

Locale-Aware Components

Responsive Language Selection

import React, { useEffect, useState } from 'react';
import Pagination from 'rc-pagination';

// Dynamic locale loading
const loadLocale = async (language: string) => {
  try {
    const locale = await import(`rc-pagination/lib/locale/${language}`);
    return locale.default;
  } catch (error) {
    // Fallback to English
    const enUS = await import('rc-pagination/lib/locale/en_US');
    return enUS.default;
  }
};

function DynamicLocalePagination() {
  const [locale, setLocale] = useState(null);
  const [language, setLanguage] = useState('en_US');

  useEffect(() => {
    loadLocale(language).then(setLocale);
  }, [language]);

  if (!locale) return <div>Loading...</div>;

  return (
    <Pagination
      current={1}
      total={1000}
      locale={locale}
      showSizeChanger
      showQuickJumper
      onChange={(page, pageSize) => {
        // Handle change
      }}
    />
  );
}

Browser Language Detection

import React, { useState, useEffect } from 'react';
import Pagination from 'rc-pagination';
import enUS from 'rc-pagination/lib/locale/en_US';
import zhCN from 'rc-pagination/lib/locale/zh_CN';
import jaJP from 'rc-pagination/lib/locale/ja_JP';

const localeMap = {
  'en': enUS,
  'en-US': enUS,
  'zh': zhCN,
  'zh-CN': zhCN,
  'ja': jaJP,
  'ja-JP': jaJP,
};

function BrowserLocalePagination() {
  const [locale, setLocale] = useState(enUS);

  useEffect(() => {
    const browserLang = navigator.language || navigator.languages[0];
    const matchedLocale = localeMap[browserLang] || 
                         localeMap[browserLang.split('-')[0]] || 
                         enUS;
    setLocale(matchedLocale);
  }, []);

  return (
    <Pagination
      current={1}
      total={1000}
      locale={locale}
      showSizeChanger
      showQuickJumper
      onChange={(page, pageSize) => {
        // Handle change
      }}
    />
  );
}

Integration with i18n Libraries

React-i18next Integration

import React from 'react';
import { useTranslation } from 'react-i18next';
import Pagination from 'rc-pagination';
import type { PaginationLocale } from 'rc-pagination';

function I18nextPagination() {
  const { t } = useTranslation('pagination');

  const locale: PaginationLocale = {
    items_per_page: t('itemsPerPage'),
    jump_to: t('jumpTo'),
    jump_to_confirm: t('confirm'),
    page: t('page'),
    prev_page: t('prevPage'),
    next_page: t('nextPage'),
    prev_5: t('prev5'),
    next_5: t('next5'),
    prev_3: t('prev3'),
    next_3: t('next3'),
    page_size: t('pageSize'),
  };

  return (
    <Pagination
      current={1}
      total={1000}
      locale={locale}
      showSizeChanger
      showQuickJumper
      showTotal={(total, range) => 
        t('showTotal', { start: range[0], end: range[1], total })
      }
      onChange={(page, pageSize) => {
        // Handle change
      }}
    />
  );
}

Common Locale Configurations

Business Application Locale

const businessLocale: PaginationLocale = {
  items_per_page: '/ page',
  jump_to: 'Go to page',
  jump_to_confirm: 'Go',
  page: 'Page',
  prev_page: 'Previous',
  next_page: 'Next',
  prev_5: 'Previous 5 pages',
  next_5: 'Next 5 pages',
  prev_3: 'Previous 3 pages',
  next_3: 'Next 3 pages',
  page_size: 'Page Size',
};

Minimal Locale (Short Text)

const minimalLocale: PaginationLocale = {
  items_per_page: '/p',
  jump_to: 'Go',
  jump_to_confirm: 'OK',
  page: 'P',
  prev_page: 'Prev',
  next_page: 'Next',
  prev_5: '« 5',
  next_5: '5 »',
  prev_3: '« 3',
  next_3: '3 »',
  page_size: 'Size',
};

Best Practices

Load locales dynamically to reduce bundle size
Cache loaded locales to avoid repeated imports
Provide fallbacks for unsupported languages
Test with long translations to ensure UI layout remains usable
Consider RTL languages for right-to-left text display
Localize the showTotal function along with the locale object
Use TypeScript to ensure locale objects match the required interface

Install with Tessl CLI

npx tessl i tessl/npm-rc-pagination

docs

advanced-customization.md

index.md

internationalization.md

pagination.md

tile.json

tessl/npm-rc-pagination