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
`initialLocale``string`The initial locale2.0.0
`locales`*`object`Map the locale with the name of country that will be displayed in the popover2.0.0
`localizations`*`object`Map the locale with with its localization data2.0.0
`onUpdateLocalization`*`(localization: string) => void`The 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>
);
/

See also