CODEWITHSUNDEEP
javascriptreactjsinternationalization
themazz
themazz

Reputation: 1137

Which is the easiest way to implement a translation for my reactjs app?

I wanted to translate my reactjs app in different languages.

I saw there is a module called i18next and it seems to be what I am looking for but I do not know how to implement this, as many files are involved, very confusing.

Is there any easy way to translate my application using any module or a simple code ?

My idea is to have different files depending on the language e.g es-es.js, en-en.js ...etc.

Any simple tutorial or how can I do this please ?

Thanks

Upvotes: 1

Views: 745

Answers (1)

webdeb
webdeb

Reputation: 13211

For a simple way to translate labels, you could write your own module like this:

let lang = "en";
const i18n = {
  "en": {
     "hello": "hello"
  },
  "es": {
     "hello": "olla"
  }
}

export const t = (str) => i18n[lang][str] || str;
export setLang = lang => {lang = lang}

Then you can use it somewhere in your code like this

import {t, setLang} from 'i18n'

setLang('es');
t('hello') // => olla

This is very basic, and only works for simple labels, if you would like to have variables, pluralizations, and other formatting you should learn how to use some of the great libraries out there.

Imagine you have to develop i18next yourself, it will definitely const more effort then to learn the ready-to-use stuff

Upvotes: 1

Related Questions