Add the locale switcher to the toolbar

The LocalePopover component provided by the Locale Switcher plugin accepts the following properties:
(* denotes a required property)
PropertyTypeDescriptionFrom
initialLocalestringThe initial locale2.0.0
locales*objectMap the locale with the name of country that will be displayed in the popover2.0.0
localizations*objectMap the locale with with its localization data2.0.0
onUpdateLocalization*(localization: string) => voidThe function that is invoked after switching to given locale2.0.0
import { LocalizationContext, LocalizationMap, Viewer } from '@react-pdf-viewer/core';
import { localeSwitcherPlugin } from '@react-pdf-viewer/locale-switcher';
// The localization data for Vietnamese
import vi_VN from './vi_VN.json';
// Your render function
const localeSwitcherPluginInstance = localeSwitcherPlugin();
const { LocalePopover } = localeSwitcherPluginInstance;
const [locale, setLocale] = React.useState('en_US');
const [l10n, setL10n] = React.useState<LocalizationMap>();
const localizationContext = { l10n, setL10n };
const localizations = {
en_US: null,
vi_VN: (vi_VN as any) as LocalizationMap,
};
const switchToLocalization = (loc: string) => {
setL10n(localizations[loc]);
setLocale(loc);
};
return (
<LocalizationContext.Provider value={localizationContext}>
<LocalePopover
initialLocale={locale}
locales={{
en_US: 'English',
vi_VN: 'Tiếng Việt',
}}
localizations={localizations}
onUpdateLocalization={switchToLocalization}
/>
<Viewer
fileUrl='...'
plugins={[
localeSwitcherPluginInstance,
]}
/>
</LocalizationContext.Provider>
);
/ 0

See also