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:

See also