Example: Add the locale switcher to the toolbar

The LocalePopover component provided by the Locale Switcher plugin accepts the following properties:

*: 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: LocalizationMap) => voidThe function that is invoked after switching to given locale2.0.0
import { LocalizationMap, LocalizationProvider, 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;

return (
    <LocalizationProvider>
    {
        (setL10n) => (
            <>
            <LocalePopover
                locales={{
                    'en_US': 'Switch locale',
                    'vi_VN': 'Chuyển ngôn ngữ',
                }}
                localizations={{
                    'vi_VN': (vi_VN as any) as LocalizationMap,
                }}
                onUpdateLocalization={(loc) => setL10n(loc)}
            />            
            <Viewer
                fileUrl='...'
                plugins={[
                    localeSwitcherPluginInstance,
                ]}
            />
            </>
        )
    }
    </LocalizationProvider>
);

(The sample code)

/ 0
0%

Related examples