Day 1 - React-i18next framework

  • Task: To correct some spanish translation in json file used by i18n module.

    My first day of 4 weeks training at Ryaz.io started with a react.js text internationalization and externalizing framework based on i18next - “react-i18n”. I am familiar with react so I was able to understand what this module is doing in the project. So, the task given to me was to correct some given english to spanish translation.

    How to install and import it into a react project?

    Installing the dependencies

    Before installing this module it is expected from the user that user’s existing react application supports hooks. First of all we will install both react-i18next and i18next package using npm.

    npm install react-i18next i18next --save
// if you'd like to detect user language and load translation
npm install i18next-http-backend i18next-browser-languagedetector --save

    Configure i18next

    i18next is core of the i18n functionality while react-i18next extends and glues it to react. Now to maintain the structure of project, make a new folder named i18n (or relative) in src folder and create a new file index.js inside src/i18n/ containing following content: ```javascript import i18n from ‘i18next’; import { initReactI18next } from ‘react-i18next’;

import Backend from ‘i18next-http-backend’; import LanguageDetector from ‘i18next-browser-languagedetector’; // don’t want to use this? // have a look at the Quick start guide // for passing in lng and translations on init

i18n // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales) // learn more: https://github.com/i18next/i18next-http-backend // want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2—use-the-locize-cdn .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ fallbackLng: ‘en’, debug: true,

interpolation: {
  escapeValue: false, // not needed for react as it escapes by default
}   });

export default i18n;

### Translating the content
In the project I was working we need to have two language english and spanish. So considering these as example create two new file under path `i18n/locales/en/translation.json` and `i18n/locales/esp/translation.json`. Here, `en` and `esp` are laguage code for english and spanish respectively. If you need to add any other language just replace <language_code> with the code of your language in `i18n/locales/<language_code>/translation.json`.  Now inside the translation.json store key : value pairs of the words you want to translate, for example:
```javascript
{
  "title": "Welcome to react using react-i18next",
  "description": {
    "part1": "This blog is created by jaswant singh.",
    "part2": "Visit my github profile."
  }
}

Now do same with other language’s translation.json file.

Inside index.js place resources: { en: { translation: translationEN, }, esp: { translation: translationESP, } and supportedLngs: ['en','esp'] inside .init() object.

Translation in components

Now the final step is to use the translation in json file inside the components. To do so you have to first import the module in the component using useTranslation hook:

import { useTranslation } from 'react-i18next';

Now, destructure the useTranslation hook:

const { t } = useTranslation();

You can now easily use the keys you placed inside the json file in the component by using a simple syntax {t('keyName')}. For example:

<h1>{t('title')}</h1>
<h2>{t('description.part1')}</h2>
<h3>{t('description.part2')}</h3>

Note: Keep the name of keys in the object same in every language. Now if you want to see the translation in other language (whose translation.json you have created) just put this code inside index.js file:

i18n.changeLanguage("<language_code>");

To make this more easy you can just place a button on the frontend to switch between the language. So, this was a brief introduction and working of i18next module. For deep understanding you can follow this resource: https://react.i18next.com/.

Happy Coding :)