Multilanguage support with i18next in React Js

Hello, today I will tell you how you can use the multi-language support in your React Js projects with i18next.

First of all, I want to talk about what is i18next?

📌 i18next

I18next is an internationalization framework written in and for JavaScript. But it’s much more than that.

The i18next-community created integrations for frontend frameworks such as React, AngularJS, Vue.js and many more.

You can also use i18next with Node.js, PHP, iOS, Android and other platforms.

After understanding what i18next is, I can now begin to explain how to integrate i18next into the React Js project.

Start installing i18next with npm with the following command.

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

After installing, you can import as follows.

import { useTranslation } from 'react-i18next';

📌 Configure i18next

I18next is the core of the i18n functionality while react-i18next extends and glues it to react.

Create a new file i18n.js beside your index.js containing following content:

Here you must specify the languages you want to translate in the const Languages value. (Line: 9)

You must also specify Languages as a whitelist in init. (Line:25)

• After importing the i18n.js file that I created into the index.js file, I use React Suspense to wrap the <App />.

📌 So what is this React Suspense?

Suspense is React’s special component that helps us to render the component we loaded dynamically and display backup content in the time until this component is loaded. Suspense component gets a single props named fallback. And this fallback props is where we specify the content to be rendered until our dynamic component is loaded or when there is a problem with the component loading.

• Then you will use the useTranslation hook in the functional component. And useTranslation t function and i18n instance inside your functional component.

Later, I write a function named TranslateClick, since it will be based on clicking the button, I give the lang parameter as a parameter. In this way, you can choose which language to use when calling the function, and I use the i18n.changeLanguage function to change the language into this function.

Yes, now it’s time to call the function in HTML tags.

I have given the abbreviations I have defined in the i18m.js file as parameters to the translateClick function that I call with the onClick function. (‘tr’, ‘en’)

• Now it’s time for the json files to pull in translations.

For this, I first create a locales folder in the public folder. Then I create the tr and en folders with the translations into this folder.

Then I create json files named translation.json in these two folders.

I create the json file by writing the Turkish and English equivalents of the parts you will translate into these json files.

en

tr

In this way, after writing the parts to be translated in the json file, the last step is to use the structure we have prepared instead of the text to be translated in HTML.

In this way, I can access the data in the json file using the t function, and when I press the Turkish-English buttons, it is possible to switch to the json data I have given.

I hope this article was useful to you. See you in my next article.

Keep working!