Configuring languages in the application

You can add languages to the application or change the default language. You must create a src/config/intl.config.js file to be read by the src/intl/IntlInit.js component, which handles storage of the configuration and creates the react-intl IntlProvider.

About this task

Review the src/config/intl.config.js.sample.md file, which contains the intl.config.js object schema and an example src/config/intl.config.js file.

Translated messages for the default supported languages are provided in the following locations:

For universal-access-ui components, in the universal-access-ui-locales package at /node_modules/@spm/universal-access-ui-locales.
For the core-ui components, in the core-ui-locales package at /node_modules/@spm/core-ui-locales.
For the intelligent-evidence-gathering components, in the intelligent-evidence-gathering-locales package at /node_modules/@spm/intelligent-evidence-gathering-locales.

Procedure

Create a src/config/intl.config.js file with reference to the following example from the src/config/intl.config.js.sample.md file.

export default {
  defaultLocale: 'en',
  locales: [
    {
      locale: 'en',
      displayName: 'English',
      localeData: () => {
        require('@formatjs/intl-pluralrules/locale-data/en');
        require('@formatjs/intl-numberformat/locale-data/en');
        require('@formatjs/intl-relativetimeformat/locale-data/en');
      }
    },
    {
      locale: 'de',
      displayName: 'German',
      localeData: () => {
        require('@formatjs/intl-pluralrules/locale-data/de');
        require('@formatjs/intl-numberformat/locale-data/de');
        require('@formatjs/intl-relativetimeformat/locale-data/de');
      },
      messages: {
        ...require('@spm/core-ui-locales/data/messages_de'),
        ...require('@spm/intelligent-evidence-gathering-locales/data/messages_de'),
        ...require('@spm/universal-access-ui-locales/data/messages_de')
      }
    },
    {
      locale: 'ar',
      displayName: 'Arabic',
      direction: 'rtl',
      localeData: () => {
        require('@formatjs/intl-pluralrules/locale-data/ar');
        require('@formatjs/intl-numberformat/locale-data/ar');
        require('@formatjs/intl-relativetimeformat/locale-data/ar');
      },
      messages: {
        ...require('@spm/core-ui-locales/data/messages_ar'),
        ...require('@spm/intelligent-evidence-gathering-locales/data/messages_ar'),
        ...require('@spm/universal-access-ui-locales/data/messages_ar')
      }
    },
    {
      locale: 'ht',
      displayName: 'Haitian',
      /* 
        Custom locale data
        Where the locale you need to support is not found in the react-intl locale data you can create your own locale data to handle this. Simply create an object with the locale property. You must include at a minimum the pluralRuleFunction
        See https://github.com/yahoo/react-intl/issues/1050
      */
      localeData: () => {
        return {
          locale: 'ht',
          pluralRuleFunction(arg1, arg2) {
            return arg1 && arg2 === 1 ? 'one' : 'other';
          }
        };
      },
      messages: require('../locale/messages_ht')
    }
  ]
};