@/i18n
Utilities to manage application-level messages and translations.
Installation
yarn add @commercetools-frontend/i18n
Supported locales
The Merchant Center supports the following application locales:
en
de
es
fr-FR
pt_BR
zh-CN
The default locale is always en
. If translations for a certain locale are not defined, the application falls back to using en
.
Loading messages
If your customization supports different locales, you must instruct the application to load the appropriate translation files. For more information, see Importing translations.
Utilities
Use these utilities when loading messages with dynamic imports for code splitting. For more information, see Importing translations.
parseChunkImport
Parses the imported translation file and returns an object with key-value translations.
mapLocaleToIntlLocale
Maps the given locale to the locale supported by the customization. For example, if a user selects de_DE
in their profile, this function could map de_DE
to de
.
Components
AsyncLocaleData
Since this is already implemented in the Shell components of each customization type, you don't need to explicitly use it.
The component lets you dynamically load the messages for the given user locale and configure the <IntlProvider>
with them.
import { IntlProvider } from 'react-intl';import { AsyncLocaleData } from '@commercetools-frontend/i18n';const Application = (props) => (<AsyncLocaleDatalocale={props.user.locale}applicationMessages={loadMessages}>{({ isLoading, locale, messages }) => {if (isLoading) return null;return (<IntlProvider locale={locale} messages={messages}>...</IntlProvider>);}}</AsyncLocaleData>);
Hooks
useAsyncLocaleData
Similar to the AsyncLocaleData
component, this functionality is also implemented as a React hook.
import { IntlProvider } from 'react-intl';import { useAsyncLocaleData } from '@commercetools-frontend/i18n';const Application = (props) => {const { isLoading, locale, messages } = useAsyncLocaleData({locale: props.locale,applicationMessages: loadMessages,});if (isLoading) return null;return (<IntlProvider locale={locale} messages={messages}>...</IntlProvider>);};