Localization

Note

Support for localization of Dashboard extensions was added in v3.5.1

The Dashboard uses Lingui, which provides a powerful i18n solution for React:

ICU MessageFormat support
Automatic message extraction
TypeScript integration
Pluralization support
Compile-time optimization

Wrap your strings

First you'll need to wrap any strings that need to be localized:

Tsx

import { Trans, useLingui } from '@lingui/react/macro';function MyComponent() {    const { t } = useLingui();    return (        <div>            <h1>                <Trans>Welcome to Dashboard</Trans> {/* [!code highlight] */}            </h1>            <p>{t`Click here to continue`}</p> {/* [!code highlight] */}        </div>    );}

You will mainly make use of the Trans component and the useLingui hook.

Extract translations

Create a lingui.config.js file in your project root, with references to any plugins that need to be localized:

import { defineConfig } from '@lingui/cli';export default defineConfig({    sourceLocale: 'en',    // Add any locales you wish to support    locales: ['en', 'de'],    catalogs: [        // For each plugin you want to localize, add a catalog entry        {            // This is the output location of the generated .po files            path: '<rootDir>/src/plugins/reviews/dashboard/i18n/{locale}',            // This is the pattern that tells Lingui which files to scan            // to extract translation strings            include: ['<rootDir>/src/plugins/reviews/dashboard/**'],        },    ],});

Then extract the translations:

npx lingui extract

This will output the given locale files in the directories specified in the config file above. In this case:

src/
└── plugins/
    └── reviews/
        └── dashboard/
            └── i18n/
                ├── en.po
                └── de.po

Since we set the "sourceLocale" to be "en", the en.po file will already be complete. You'll then need to open up the de.po file and add German translations for each of the strings, by filling out the empty msgstr values:

de.po

#: test-plugins/reviews/dashboard/review-list.tsx:51msgid "Welcome to Dashboard"msgstr "Willkommen zum Dashboard"

Wrap your strings

First you'll need to wrap any strings that need to be localized:

Tsx

import { Trans, useLingui } from '@lingui/react/macro';function MyComponent() {    const { t } = useLingui();    return (        <div>            <h1>                <Trans>Welcome to Dashboard</Trans> {/* [!code highlight] */}            </h1>            <p>{t`Click here to continue`}</p> {/* [!code highlight] */}        </div>    );}

Extract translations

Create a lingui.config.js file in your project root, with references to any plugins that need to be localized:

import { defineConfig } from '@lingui/cli';export default defineConfig({    sourceLocale: 'en',    // Add any locales you wish to support    locales: ['en', 'de'],    catalogs: [        // For each plugin you want to localize, add a catalog entry        {            // This is the output location of the generated .po files            path: '<rootDir>/src/plugins/reviews/dashboard/i18n/{locale}',            // This is the pattern that tells Lingui which files to scan            // to extract translation strings            include: ['<rootDir>/src/plugins/reviews/dashboard/**'],        },    ],});

Then extract the translations:

npx lingui extract

This will output the given locale files in the directories specified in the config file above. In this case:

src/ └── plugins/ └── reviews/ └── dashboard/ └── i18n/ ├── en.po └── de.po

de.po

#: test-plugins/reviews/dashboard/review-list.tsx:51msgid "Welcome to Dashboard"msgstr "Willkommen zum Dashboard"