Need private packages and team management tools?Check out npm Teams »

@commercetools-frontend/i18n

16.5.2 • Public • Published

@commercetools-frontend/i18n

Latest release (latest dist-tag) Latest release (next dist-tag) Minified + GZipped size GitHub license

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

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

Supported locales

  • en
  • de
  • es
  • fr-FR
  • zh-CN

Usage

This package should not be used directly to load the application messages, the application-shell does that internally.

import { AsyncLocaleData } from '@commercetools-frontend/i18n';
import { ConfigureIntlProvider } from '@commercetools-frontend/application-shell';
 
const myApplicationMessages = {
  en: {
    Title: 'Application Title',
  },
};
 
const MyApplication = props => (
  <AsyncLocaleData
    locale={props.user.locale}
    applicationMessages={myApplicationMessages}
  >
    {({ isLoading, locale, messages }) => {
      if (isLoading) return null;
 
      return (
        <ConfigureIntlProvider locale={locale} messages={messages}>
          ...
        </ConfigureIntlProvider>
      );
    }}
  </AsyncLocaleData>
);

Usage with code splitting

import { AsyncLocaleData } from '@commercetools-frontend/i18n';
import { ConfigureIntlProvider } from '@commercetools-frontend/application-shell';
 
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 => result.default,
    error => {
      // eslint-disable-next-line no-console
      console.warn(
        `Something went wrong while loading the app messages for ${lang}`,
        error
      );
 
      return {};
    }
  );
};
 
const Application = props => (
  <AsyncLocaleData
    locale={props.user.locale}
    applicationMessages={loadMessages}
  >
    {({ isLoading, locale, messages }) => {
      if (isLoading) return null;
 
      return (
        <ConfigureIntlProvider locale={locale} messages={messages}>
          ...
        </ConfigureIntlProvider>
      );
    }}
  </AsyncLocaleData>
);

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 mc-scripts extract-intl [options].

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 master, 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.

Install

npm i @commercetools-frontend/i18n

DownloadsWeekly Downloads

2,917

Version

16.5.2

License

MIT

Unpacked Size

191 kB

Total Files

38

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar