# Internationalization

Utilities to manage application-level messages and translations.

## Installation

```yarn
yarn add @commercetools-frontend/i18n
```

```npm
npm --save install @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`.

## Load messages

If your customization supports different locales, you must instruct the application to load the appropriate translation files. For more information, see [Import translations](https://docs.commercetools.com/merchant-center-customizations/development/translations.md#import-translations).

## Utilities

Use these utilities when loading messages with dynamic imports for code splitting. For more information, see [Import translations](https://docs.commercetools.com/merchant-center-customizations/development/translations.md#import-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.

```jsx
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.

```jsx
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>
  );
};
```

## Related pages

- [Section overview page](https://docs.commercetools.com/merchant-center-customizations.md)
- [Previous page: Permissions](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-permissions.md)
- [Next page: Localization](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-l10n.md)