Internationalization

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

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) => (
  <AsyncLocaleData
    locale={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>
  );
};