Example: Use a different language

All text items of the viewer component are stored in a separate .json file. It allows us to localize the entire user interface in a different language easily.

By default, all text items are translated into English which is stored in a JSON file. In order to translate it into another language, you have to translate the values of properties. The properties aren't changed.

Here are the English version and another version which is translated into Vietnamese.

Use the Viewer component only

If you don't have any customized component such as Toolbar located outside of the Viewer component, then pass the localization data to the localization option:

import { LocalizationMap } from '@react-pdf-viewer/core';

<Viewer
    fileUrl="/path/to/file.pdf"
    localization={(vi_VN as any) as LocalizationMap}
/>

Use separated components

If you have a separated component such as a Toolbar and it's located outside of the Viewer component, then pass the localization data to the localization parameter of the LocalizationProvider component:

import { LocalizationMap, LocalizationProvider } from '@react-pdf-viewer/core';
import { toolbarPlugin } from '@react-pdf-viewer/toolbar';

// Your language
import vi_VN from './path/to/vi_VN.json';

const toolbarPluginInstance = toolbarPlugin();
const { Toolbar } = toolbarPluginInstance;

<LocalizationProvider localization={(vi_VN as any) as LocalizationMap}>
{(_) => (
    <Toolbar />

    <Viewer
        fileUrl="/path/to/file.pdf"
        plugins={[
            toolbarPluginInstance,
        ]}
    />
)}
</LocalizationProvider>

As you can see in the following example, all text items are translated and displayed in the target language:

(The sample code)

/ 0
0%

Related example