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 you have to create an initial context to manage the localization:

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

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

const [l10n, setL10n] = React.useState(vi_VN as any as LocalizationMap);
const localizationContext = { l10n, setL10n };

Finally, pass the created context to the `LocalizationContext.Provider` component:

import { toolbarPlugin } from '@react-pdf-viewer/toolbar';

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

<LocalizationContext.Provider value={localizationContext}>
    <Toolbar />

    <Viewer fileUrl="/path/to/file.pdf" plugins={[toolbarPluginInstance]} />
</LocalizationContext.Provider>;

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

(The sample code)

Use a different language

Use the Viewer component only

Use separated components

See also