Localizing ReactJS static apps

by paragarora

Since we are so much focused on messaging layer, internationalisation and localisation is mission critical for us. We explored lots of solutions for incorporating messages for multiple languages but none of the solution worked out of box for us. After doing research, explored we need to zero down to one of the mentioned two options:

1: i18next
2: react-intl

Although both are complementary solutions with react-intl on first looked like eventual solution. But having different string messages for different languages looked like very hacky and react-intl was not infact made for that. Its mainly for localising formats (e.g., date). Also we are already using i18n on our API servers, so i18next looks like an apt choice for the workflow is similar. Here is how to integrate this i18next.

I am assuming you are using static React app. Make sure not to fetch i18next as it requires express modules etc also installed.

Install i18next-client instead using

‘npm install i18next-client –save’

Create locales folder in root folder of your app where index.html resides. Inside locales, create en and cn folder (create a folder for every language you want to support). In each folder create translation.js file with a sample content as below:

https://gist.github.com/parag/e2effb4115d5aec33806

Open app.jsx where you have written router.run and change it to below:

https://gist.github.com/parag/e4183e8ad8c522902295

Note that we want app to start loading only after i18n has already loaded. That will be extremely important in case this is your workflow. Another choice will be to load app as well as i18n together and asynchronously update i18n variables once i18n translations are loaded. We can not do in an enterprise grade application as experience and simplicity is key to us. Also, i18next says one can load translations synchronous using Async:false option but this does not work for i18next-client.

Load i18n as global variable to be accessible across the app in app.js only

window.i18n = require('i18next-client');

Now wherever you require translations, just call ‘t’ or ‘translation’ method on i18n. e.g.,

<input type="text" placeholder={i18n.t('pages.header.placeholder.search')} />

Thats it. Would be happy to take if any doubts or suggestions in the comments. Glad if helped you in getting started for localising your app. Cheers!