@commercetools-frontend/i18n

This package contains JSON data about the i18n messages from the different application-kit packages (e.g. application-shell, etc). Additionally, it also loads locale data for moment and react-intl, which is necessary for runtime usage.

Install

``bash
$ npm install --save @commercetools-frontend/i18n
`

Supported locales

- en
- de
- es
- fr-FR
- pt_BR

Usage

> The component, or the useAsyncLocaleData hook, are internally used by the and there is no need to use them directly.
> If you do need to load translation files asynchronously, we expose an additional hook useAsyncIntlMessages that you can use for that.
> The difference between those is that the "async locale data" components additionally load the application-kit and ui-kit messages, as well as the moment locales.

$3

With static messages

`js
import { IntlProvider } from 'react-intl';
import { AsyncLocaleData } from '@commercetools-frontend/i18n';

const myApplicationMessages = {
en: {
Title: 'Application Title',
},
};

const Application = (props) => (
locale={props.user.locale}
applicationMessages={myApplicationMessages}
>
{({ isLoading, locale, messages }) => {
if (isLoading) return null;

return (

...

);
}}

);
`

With dynamic loaded messages (code splitting)

`js
import { IntlProvider } from 'react-intl';
import {
AsyncLocaleData,
parseChunkImport,
} from '@commercetools-frontend/i18n';

const loadMessages = (lang) => {
let loadAppI18nPromise;
switch (lang) {
case 'de':
loadAppI18nPromise = import(
'./i18n/data/de.json' / webpackChunkName: "app-i18n-de" /
);
break;
case 'es':
loadAppI18nPromise = import(
'./i18n/data/es.json' / webpackChunkName: "app-i18n-es" /
);
break;
default:
loadAppI18nPromise = import(
'./i18n/data/en.json' / webpackChunkName: "app-i18n-en" /
);
}

return loadAppI18nPromise.then(
(result) => parseChunkImport(result),
(error) => {
// eslint-disable-next-line no-console
console.warn(
Something went wrong while loading the app messages for ${lang},
error
);

return {};
}
);
};

const Application = (props) => (
locale={props.user.locale}
applicationMessages={loadMessages}
>
{({ isLoading, locale, messages }) => {
if (isLoading) return null;

return (

...

);
}}

);
`

$3

Similarly to the , we also expose a React hook.

`js
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 (

...

);
};
`

Generating translation files

After you have defined the intl messages in your React components, you should extract those messages into the source file core.json. This file contains a key-value map of the message id and the message value.

To extract the messages simply run pnpm extract-intl.

Syncing translations with Transifex

We use Transifex as our translation tool. Once we have extracted new messages into the source file core.json (see mc-scripts extract-inl) and pushed/merged to main, the file will be automatically synced with Transifex using the Transifex GitHub Integration.

Translations that have been reviewed in Transifex will be automatically pushed back to GitHub by the Transifex Bot via a Pull Request.

Shared messages

This package exposes some "shared" messages that can be used for different things like buttons, etc. instead of having duplicated messages.

The messages are exported as sharedMessages` property.