React PDF Viewer provides different localization files that can be used to localize the user interface.
Installing
npm install @react-pdf-viewer/locales
Using a localization file
The `locales`
package provides the following localization files whose each of them is a JSON file:
Locale | File | From |
---|
Arabic | `lib/ar_AE.json` | 1.0.0 |
Chinese (simplified) | `lib/zh_CN.json` | 1.0.0 |
Chinese (traditional) | `lib/zh_TW.json` | 1.0.0 |
English | `lib/en_US/json` | 1.0.0 |
French | `lib/fr_FR.json` | 1.0.0 |
German | `lib/de_DE.json` | 1.0.0 |
Italian | `lib/it_IT.json` | 1.0.0 |
Japanese | `lib/jp_JP.json` | 1.0.0 |
Korean | `lib/ko_KR.json` | 1.0.0 |
Portuguese | `lib/pt_PT.json` | 1.0.0 |
Russian | `lib/ru_RU.json` | 1.0.0 |
Spanish | `lib/es_ES.json` | 1.0.0 |
Vietnamese | `lib/vi_VN.json` | 1.0.0 |
In order to use the given localization file, you need to import it and pass it to the `localization`
option of the `Viewer`
component.
The example below applies the German localization file:
import { LocalizationMap, Viewer } from '@react-pdf-viewer/core';
import de_DE from '@react-pdf-viewer/locales/lib/de_DE.json';
const defaultLayoutPluginInstance = defaultLayoutPlugin();
<Viewer localization={de_DE as unknown as LocalizationMap} />;
You can use the
Locale Switcher plugin to add a menu that allows users to switch between different locales.
Using a RTL language
If you want to use a RTL language such as Arabic, it's recommended to use the
`direction`
option. So the user interface is shown in the same direction.
See
this example for more details.