Localization

warning

This process is deprecated, please check G11n docs for your localization flow.

The FrontHub works with i18next providing you an easy way to configure it.

How to use it

Installing

For React applications install react-18next:

yarn add react-i18next

You should not configure the i18-next library manually, it is already configured internally by FrontHub.

warning

By configuring i18next once again, you may experience problems in the translation of the microfrontend.

Folder Structure

Create locales directory for each component to keep things easy to maintain as the project grows up.

/src
  ├── Contact
    ├── locales/
      ├── pt-BR.json
      ├── en-US.json
    ...
    ── Contact.js
    ── Contact.test.js
  ├── Welcome
    ├── locales/
      ├── pt-BR.json
      ├── en-US.json
    ...
    ── Welcome.js
    ── Welcome.test.js
  ── ...

note

locales files MUST follow the schema i18next JSON v3 schema and its names MUST be in ISO 639-1 standard language codes, following rfc5646 ("Language Subtag Sources and Interpretation , Section '2.2.4. Region Subtag'")

Usage

Import react-i18next and use inside your components. If you have any questions on how to use react-i18next you can always check its documentation.

/src/Component/Component.js

import React from 'react'
import { useTranslation } from 'react-i18next'

const apples = 42

const Component = () => {
  const { t } = useTranslation()
  return (
    <div>
      {t('pet.salute')}!<br />
      {t('pet.apples', { apples })}
    </div>
  )
}

/src/Component/locales/en-US.js

{
  "pet": {
    "salute": "Hello",
    "apples": "I have {{ apples, number }} apples"
  }
}

/src/Component/locales/pt-BR.js

{
  "pet": {
    "salute": "Olá",
    "apples": "Eu tenho {{ apples, number }} maçãs"
  }
}

Configuration

Development

Take note that we assume you are using pt-BR as default language code when displaying things on the screen.

To change the language you need to configure it in the front-hub.config.js including the following code

front-hub.config.js

module.exports = {
  intl: {
-   language: 'pt-BR'
+   language: 'en-US'
  }
}

You may also work in debug mode while developing

front-hub.config.js

module.exports = {
  intl: {
    language: 'en-US',
    debug: true,
  },
}

Production

You need to define the language to used in your application host

fronthub('configure', {
  intl: {
    language: 'en-US',
  },
})

Formatting

FrontHub provides an intlFormatting addon responsible for interpolating according to a format.

You can define a function which returns other function to format not only numbers or dates but custom formatting too.

This function takes as it's first parameter the intl configuration and then the user context data both defined in the FrontHub configuration

intlFormatting: function(config, context) { /* ... */ }

The following example will show how to interpolate a custom decimal format according to the user currency data and the language

In your translation add the interpolation key and then the format {{key, format}}

en-US.json

{
  "price": "Price: {{value, decimal}}"
}

Define the intlFormatting addon by passing an object as a second parameter to the Connect function in your entrypoint file

src/index.js

import { Connect } from '@resultadosdigitais/front-hub/react'

const App = () => <div>{t('price', { value: 123456.789 })}</div>

export default Connect(() => <App />, {
  intlFormatting: function (config, context) {
    return function (value, format, lng) {
      if (format === 'decimal') {
        return new Intl.NumberFormat(lng, {
          style: 'currency',
          currency: context.user.currency,
        }).format(value)
      }
      return value
    }
  },
})

The text will be displayed as Price: €123,456.79 if lng is "en-US" for example.