React PDF viewer
v1.4.0

Example: Switch between different languages

Prepare an icon to switch language

It's a SVG icon. You can take a look at the full content of the SVG element here.

/* LocaleIcon.tsx */
import { Icon } from 'pdfviewer';

const LocaleIcon: React.FC<{}> = () => {
    return (
        <Icon size={16}>
            <path d={`...`} />
        </Icon>
    );
};

Languages popover

Next, we will create a popover that displays all available languages which are Vietnamese and English.

/* LocalePopover.tsx */

import {
    Button,
    MenuItem,
    Popover,
    Position,
    Toggle,
    Tooltip,
} from 'pdfviewer';
import React from 'react';

import LocaleIcon from './LocaleIcon';

interface LocalePopoverProps {
    onActivateLocale(locale: string): void;
}

const LocalePopover: React.FC<LocalePopoverProps> = ({ onActivateLocale }) => {
    // The current locale
    const [locale, setLocale] = React.useState('en_US');

    // Render the locale label
    const renderLocale = () => {
        const renderLocaleLabel = () => {
            switch (locale) {
                case 'vi_VN':
                    return 'Chuyển ngôn ngữ';
                case 'en_US':
                default:
                    return 'Switch locale';
            }
        };

        return (
            <div>{renderLocaleLabel()}</div>
        );
    };

    // Render the popover's target
    const renderTarget = (toggle: Toggle, opened: boolean) => (
        <Tooltip
            target={
                <Button onClick={toggle} isSelected={opened}>
                    <LocaleIcon />
                </Button>
            }
            content={renderLocale}
        />
    );

    // Render the popover's content
    const renderContent = (toggle: Toggle) => {
        const changeLocale = (newLocale: string) => {
            setLocale(newLocale);
            onActivateLocale(newLocale);
            toggle();
        };
        const switchToVietnamese = () => changeLocale('vi_VN');
        const switchToEnglish = () => changeLocale('en_US');

        return (
            <ul>
                <MenuItem
                    checked={locale === 'vi_VN'}
                    onClick={switchToVietnamese}
                >
                    Tiếng Việt
                </MenuItem>
                <MenuItem
                    checked={locale === 'en_US'}
                    onClick={switchToEnglish}
                >
                    English
                </MenuItem>
            </ul>
        );
    };

    return (
        <Popover
            target={renderTarget}
            content={renderContent}
        />
    );
};

Customize the toolbar

It's the time to add the popover to the toolbar. You can take a look at the Create a simple toolbar example to see more details on customizing the toolbar.

We create a function to render the toolbar:

/* LocaleSwitcher.tsx */

const renderToolbar = (toolbarSlot: ToolbarSlot): React.ReactElement => {
    return (
        <div>
            ...
            <LocalePopover onActivateLocale={activateLocale} />
            {toolbarSlot.moreActionsPopover}
        </div>
    );
};

As you see, the language popover is displayed near the end of the toolbar. The activateLocale function will be invoked when user switchs to another language:

/* LocaleSwitcher.tsx */

// The current localization
const [localization, setLocalization] =
    React.useState<LocalizationMap | undefined>(undefined);

// Called when user switchs to another language
const activateLocale = (locale: string) => {
    switch (locale) {
        case 'vi_VN':
            setLocalization((vi_VN as any) as LocalizationMap);
            break;
        case 'en_US':
        default:
            setLocalization(undefined);
            break;
    }
};

Finally, the viewer uses the customized toolbar and the managed localization:

/* LocaleSwitcher.tsx */

const layout = (
    isSidebarOpened: boolean,
    main: Slot,
    toolbar: RenderToolbar,
    sidebar: Slot,
): React.ReactElement => {
    return defaultLayout(
        isSidebarOpened,
        main,
        toolbar(renderToolbar),
        sidebar,
    );
};

return (
    <Viewer
        fileUrl={fileUrl}
        layout={layout}
        localization={localization}
    />
);

For the full sample code, please look at this gist.

In the following example, you can switch between available languages by clicking the earth icon in the toolbar.

(The sample code)

/ 8
90%