Internationalization
For the internationalization we decided to choose the library Format.js using react-intl as the react integration. We made a wrapper called LanguageWrapper that contains all of our translation logic. Apart from that, we save the language preferences of the user in the redux store and we persist it using the local storage. The user has the option to change their language preferences.
Dinamical Internationalization

Adding another Language

  • Create a .json file on src/languages for each language that you want to add, the .json name should be the languages.
  • Replace every text you want to translate on your project with the useFormatMessage hook.
  • Fill each .json with every id for all text translation used on every useFormatMessage and the text that you want to be seen.
  • Import your .json file/s on the src/utils/index.js and add them to messages.
  • Place your icon/s for your language/s on src/assets.
  • Import your icon/s and add it/them to flags on src/utils/index.js.
  • Import your language/s from the date-fns library and then call registerLocale and pass your import to make sure DatePicker can use your language. Then put your language format on dateFormat for the DatePicker.

Creating your translation file

The .json file must be filled with each text that wants to be translated. Each translation is made by an id and the text for that language.
The id should be the file name where it is located + an id for the text
en.json
1
{
2
"App.title":"Title"
3
}
Copied!

How to translate a Text

Before Replacing

1
<h1>Title</h1>
Copied!

After Replacing

useFormatMessage is receiving just the text id, but this hook can also recieve a default message, a description and a value.
You do not need to set a value in case your text does not receive a variable.
1
<h1>useFormatMessage('App.Title')</h1>
Copied!

How to translate a Text with a variable

Before Replacing

1
const example = 'World';
2
<p>Hello {example}!</p>;
Copied!

After Replacing

1
const example = 'World';
2
<p>useFormatMessage('App.helloWorld', { world: example })</p>;
Copied!

On the .json file

en.json
1
{
2
"App.helloWorld":"Hello {world}!"
3
}
Copied!

How to internationalize a Date

Before Replacing

1
const date = Date.now();
2
<p>{date}</p>;
Copied!

After Replacing

1
const date = Date.now();
2
<p>{useFormatDate(date)}</p>;
Copied!

How to add your language on DatePicker

  • Import your language from date-fns/locale/[yourlanguage]
  • Add another registerLocale with your language as the first parameter and the import from date-fns as second parameter.
  • Place your language with its date format on dateFormat.
Last modified 1yr ago