0
# Internationalization
1

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

4
## Import
5

6
```typescript
7
import Pagination from 'rc-pagination';
8
import type { PaginationLocale } from 'rc-pagination';
9

10
// Import specific locales as needed
11
import zhCN from 'rc-pagination/lib/locale/zh_CN';
12
import enUS from 'rc-pagination/lib/locale/en_US';
13
import jaJP from 'rc-pagination/lib/locale/ja_JP';
14
```
15

16
## Locale Interface
17

18
```typescript { .api }
19
/**
20
 * Pagination locale configuration interface
21
 * All properties are optional - missing properties will fall back to defaults
22
 */
23
interface PaginationLocale {
24
  // Size changer options
25
  items_per_page?: string;    // Text for "/ page" or items per page indicator
26
  page_size?: string;         // Text for "Page Size" label
27
  
28
  // Quick jumper
29
  jump_to?: string;          // Text for "Go to" or "Jump to" label
30
  jump_to_confirm?: string;  // Text for confirmation button (e.g., "confirm", "go")
31
  page?: string;             // Text for "Page" label
32
  
33
  // Navigation buttons
34
  prev_page?: string;        // Text for previous page button
35
  next_page?: string;        // Text for next page button
36
  prev_5?: string;          // Text for "Previous 5 Pages" tooltip
37
  next_5?: string;          // Text for "Next 5 Pages" tooltip  
38
  prev_3?: string;          // Text for "Previous 3 Pages" tooltip
39
  next_3?: string;          // Text for "Next 3 Pages" tooltip
40
}
41
```
42

43
## Built-in Locales
44

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

47
### Major Locales (Common Usage)
48

49
```typescript
50
// English locales
51
import enUS from 'rc-pagination/lib/locale/en_US';
52
import enGB from 'rc-pagination/lib/locale/en_GB';
53

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

58
// European locales
59
import deDe from 'rc-pagination/lib/locale/de_DE';
60
import frFR from 'rc-pagination/lib/locale/fr_FR';
61
import esES from 'rc-pagination/lib/locale/es_ES';
62
import itIT from 'rc-pagination/lib/locale/it_IT';
63
import ptBR from 'rc-pagination/lib/locale/pt_BR';
64
import ruRU from 'rc-pagination/lib/locale/ru_RU';
65

66
// Asian locales
67
import jaJP from 'rc-pagination/lib/locale/ja_JP';
68
import koKR from 'rc-pagination/lib/locale/ko_KR';
69
import hiIN from 'rc-pagination/lib/locale/hi_IN';
70
import thTH from 'rc-pagination/lib/locale/th_TH';
71
import viVN from 'rc-pagination/lib/locale/vi_VN';
72
```
73

74
### Complete Locale List
75

76
Available locales include:
77

78
**European Languages:**
79
- `da_DK` (Danish), `nl_NL` (Dutch), `nl_BE` (Dutch Belgium)
80
- `fi_FI` (Finnish), `fr_BE` (French Belgium), `fr_CA` (French Canada)
81
- `de_DE` (German), `el_GR` (Greek), `hu_HU` (Hungarian)
82
- `is_IS` (Icelandic), `ga_IE` (Irish), `it_IT` (Italian)
83
- `lv_LV` (Latvian), `lt_LT` (Lithuanian), `nb_NO` (Norwegian)
84
- `pl_PL` (Polish), `pt_PT` (Portuguese), `ro_RO` (Romanian)
85
- `sk_SK` (Slovak), `sl_SI` (Slovenian), `sv_SE` (Swedish)
86
- `cs_CZ` (Czech), `hr_HR` (Croatian), `et_EE` (Estonian)
87

88
**Asian Languages:**
89
- `bn_BD` (Bengali), `hi_IN` (Hindi), `kn_IN` (Kannada)
90
- `ml_IN` (Malayalam), `pa_IN` (Punjabi), `ta_IN` (Tamil)
91
- `id_ID` (Indonesian), `ms_MY` (Malay), `th_TH` (Thai)
92
- `vi_VN` (Vietnamese), `km_KH` (Khmer), `my_MM` (Myanmar)
93
- `ne_NP` (Nepali), `si_LK` (Sinhala)
94

95
**Middle Eastern & African:**
96
- `ar_EG` (Arabic), `he_IL` (Hebrew), `fa_IR` (Persian)
97
- `tr_TR` (Turkish), `ur_PK` (Urdu), `am` (Amharic)
98

99
**Other Languages:**
100
- `az_AZ` (Azerbaijani), `bg_BG` (Bulgarian), `by_BY` (Belarusian)
101
- `ca_ES` (Catalan), `eu_ES` (Basque), `gl_ES` (Galician)
102
- `ka_GE` (Georgian), `kk_KZ` (Kazakh), `kmr_IQ` (Kurdish)
103
- `mk_MK` (Macedonian), `mn_MN` (Mongolian), `sr_RS` (Serbian)
104
- `tk_TK` (Turkmen), `ug_CN` (Uyghur), `uk_UA` (Ukrainian)
105
- `uz_UZ` (Uzbek)
106

107
## Usage Examples
108

109
### Using Built-in Locales
110

111
```typescript
112
import React from 'react';
113
import Pagination from 'rc-pagination';
114
import zhCN from 'rc-pagination/lib/locale/zh_CN';
115

116
function ChinesePagination() {
117
  return (
118
    <Pagination
119
      current={1}
120
      total={500}
121
      locale={zhCN}
122
      showSizeChanger
123
      showQuickJumper
124
      onChange={(page, pageSize) => {
125
        console.log(`页面: ${page}, 大小: ${pageSize}`);
126
      }}
127
    />
128
  );
129
}
130
```
131

132
### Multiple Language Support
133

134
```typescript
135
import React, { useState } from 'react';
136
import Pagination from 'rc-pagination';
137
import enUS from 'rc-pagination/lib/locale/en_US';
138
import zhCN from 'rc-pagination/lib/locale/zh_CN';
139
import jaJP from 'rc-pagination/lib/locale/ja_JP';
140
import frFR from 'rc-pagination/lib/locale/fr_FR';
141

142
const locales = {
143
  'en-US': enUS,
144
  'zh-CN': zhCN,
145
  'ja-JP': jaJP,
146
  'fr-FR': frFR,
147
};
148

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

153
  return (
154
    <div>
155
      <select 
156
        value={language} 
157
        onChange={(e) => setLanguage(e.target.value)}
158
      >
159
        <option value="en-US">English (US)</option>
160
        <option value="zh-CN">中文 (简体)</option>
161
        <option value="ja-JP">日本語</option>
162
        <option value="fr-FR">Français</option>
163
      </select>
164
      
165
      <Pagination
166
        current={current}
167
        total={1000}
168
        locale={locales[language]}
169
        showSizeChanger
170
        showQuickJumper
171
        showTotal={(total, range) => {
172
          // You might want to localize this text too
173
          if (language === 'zh-CN') {
174
            return `第 ${range[0]}-${range[1]} 条，共 ${total} 条`;
175
          }
176
          return `${range[0]}-${range[1]} of ${total} items`;
177
        }}
178
        onChange={setCurrent}
179
      />
180
    </div>
181
  );
182
}
183
```
184

185
### Custom Locale Configuration
186

187
```typescript
188
import React from 'react';
189
import Pagination from 'rc-pagination';
190
import type { PaginationLocale } from 'rc-pagination';
191

192
// Create custom locale
193
const customLocale: PaginationLocale = {
194
  items_per_page: '/ página',
195
  jump_to: 'Ir a',
196
  jump_to_confirm: 'confirmar',
197
  page: 'Página',
198
  prev_page: 'Página Anterior',
199
  next_page: 'Página Siguiente',
200
  prev_5: '5 Páginas Anteriores',
201
  next_5: '5 Páginas Siguientes',
202
  prev_3: '3 Páginas Anteriores', 
203
  next_3: '3 Páginas Siguientes',
204
  page_size: 'Tamaño de Página',
205
};
206

207
function SpanishPagination() {
208
  return (
209
    <Pagination
210
      current={1}
211
      total={500}
212
      locale={customLocale}
213
      showSizeChanger
214
      showQuickJumper
215
      showTotal={(total, range) => 
216
        `${range[0]}-${range[1]} de ${total} elementos`
217
      }
218
      onChange={(page, pageSize) => {
219
        console.log(`Página: ${page}, Tamaño: ${pageSize}`);
220
      }}
221
    />
222
  );
223
}
224
```
225

226
### Extending Built-in Locales
227

228
```typescript
229
import React from 'react';
230
import Pagination from 'rc-pagination';
231
import enUS from 'rc-pagination/lib/locale/en_US';
232
import type { PaginationLocale } from 'rc-pagination';
233

234
// Extend existing locale with custom text
235
const customEnglish: PaginationLocale = {
236
  ...enUS,
237
  items_per_page: '/ per page',
238
  jump_to: 'Jump to page',
239
  page_size: 'Items per page',
240
};
241

242
function CustomEnglishPagination() {
243
  return (
244
    <Pagination
245
      current={1}
246
      total={1000}
247
      locale={customEnglish}
248
      showSizeChanger
249
      showQuickJumper
250
      onChange={(page, pageSize) => {
251
        // Handle change
252
      }}
253
    />
254
  );
255
}
256
```
257

258
## Locale-Aware Components
259

260
### Responsive Language Selection
261

262
```typescript
263
import React, { useEffect, useState } from 'react';
264
import Pagination from 'rc-pagination';
265

266
// Dynamic locale loading
267
const loadLocale = async (language: string) => {
268
  try {
269
    const locale = await import(`rc-pagination/lib/locale/${language}`);
270
    return locale.default;
271
  } catch (error) {
272
    // Fallback to English
273
    const enUS = await import('rc-pagination/lib/locale/en_US');
274
    return enUS.default;
275
  }
276
};
277

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

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

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

288
  return (
289
    <Pagination
290
      current={1}
291
      total={1000}
292
      locale={locale}
293
      showSizeChanger
294
      showQuickJumper
295
      onChange={(page, pageSize) => {
296
        // Handle change
297
      }}
298
    />
299
  );
300
}
301
```
302

303
### Browser Language Detection
304

305
```typescript
306
import React, { useState, useEffect } from 'react';
307
import Pagination from 'rc-pagination';
308
import enUS from 'rc-pagination/lib/locale/en_US';
309
import zhCN from 'rc-pagination/lib/locale/zh_CN';
310
import jaJP from 'rc-pagination/lib/locale/ja_JP';
311

312
const localeMap = {
313
  'en': enUS,
314
  'en-US': enUS,
315
  'zh': zhCN,
316
  'zh-CN': zhCN,
317
  'ja': jaJP,
318
  'ja-JP': jaJP,
319
};
320

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

324
  useEffect(() => {
325
    const browserLang = navigator.language || navigator.languages[0];
326
    const matchedLocale = localeMap[browserLang] || 
327
                         localeMap[browserLang.split('-')[0]] || 
328
                         enUS;
329
    setLocale(matchedLocale);
330
  }, []);
331

332
  return (
333
    <Pagination
334
      current={1}
335
      total={1000}
336
      locale={locale}
337
      showSizeChanger
338
      showQuickJumper
339
      onChange={(page, pageSize) => {
340
        // Handle change
341
      }}
342
    />
343
  );
344
}
345
```
346

347
## Integration with i18n Libraries
348

349
### React-i18next Integration
350

351
```typescript
352
import React from 'react';
353
import { useTranslation } from 'react-i18next';
354
import Pagination from 'rc-pagination';
355
import type { PaginationLocale } from 'rc-pagination';
356

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

360
  const locale: PaginationLocale = {
361
    items_per_page: t('itemsPerPage'),
362
    jump_to: t('jumpTo'),
363
    jump_to_confirm: t('confirm'),
364
    page: t('page'),
365
    prev_page: t('prevPage'),
366
    next_page: t('nextPage'),
367
    prev_5: t('prev5'),
368
    next_5: t('next5'),
369
    prev_3: t('prev3'),
370
    next_3: t('next3'),
371
    page_size: t('pageSize'),
372
  };
373

374
  return (
375
    <Pagination
376
      current={1}
377
      total={1000}
378
      locale={locale}
379
      showSizeChanger
380
      showQuickJumper
381
      showTotal={(total, range) => 
382
        t('showTotal', { start: range[0], end: range[1], total })
383
      }
384
      onChange={(page, pageSize) => {
385
        // Handle change
386
      }}
387
    />
388
  );
389
}
390
```
391

392
## Common Locale Configurations
393

394
### Business Application Locale
395

396
```typescript
397
const businessLocale: PaginationLocale = {
398
  items_per_page: '/ page',
399
  jump_to: 'Go to page',
400
  jump_to_confirm: 'Go',
401
  page: 'Page',
402
  prev_page: 'Previous',
403
  next_page: 'Next',
404
  prev_5: 'Previous 5 pages',
405
  next_5: 'Next 5 pages',
406
  prev_3: 'Previous 3 pages',
407
  next_3: 'Next 3 pages',
408
  page_size: 'Page Size',
409
};
410
```
411

412
### Minimal Locale (Short Text)
413

414
```typescript
415
const minimalLocale: PaginationLocale = {
416
  items_per_page: '/p',
417
  jump_to: 'Go',
418
  jump_to_confirm: 'OK',
419
  page: 'P',
420
  prev_page: 'Prev',
421
  next_page: 'Next',
422
  prev_5: '« 5',
423
  next_5: '5 »',
424
  prev_3: '« 3',
425
  next_3: '3 »',
426
  page_size: 'Size',
427
};
428
```
429

430
## Best Practices
431

432
1. **Load locales dynamically** to reduce bundle size
433
2. **Cache loaded locales** to avoid repeated imports
434
3. **Provide fallbacks** for unsupported languages
435
4. **Test with long translations** to ensure UI layout remains usable
436
5. **Consider RTL languages** for right-to-left text display
437
6. **Localize the `showTotal` function** along with the locale object
438
7. **Use TypeScript** to ensure locale objects match the required interface