Create labels for whole website in one javascript file

Question

I'm using react js and I'm creating a multilanguage site.

Is there any way to create an javascript file where I can put all my text, labels and then use them on the site?

How could I do that?

Answer 1

If you want to add i18n to your app, there are several ways to do it. In SO you can find solutions like this. Yahoo created a library (plug-in?) named React Intl to do the same job.

But if you want to create your own file you could create a json file like:

{
  "en":{
    "okButton": "OK",
    ...
  },
  "es:{
    "okButton": "Aceptar",
    ...
  }
  "de": { ... }
}

And then just choose one language. Or you could just create a language file for each language, which will give you more flexibility and smaller files.

Assuming that you create a file for each language (i18n_en.json, i18n_es.json...), you can then check what is the current language to be loaded and load just the needed file using an Ajax call, generating the URL with something like:

const LANG_URL='/myPath/lang/i18n_';
var langFileUrl= LANG_URL+ language+'.json';