Implement i18next In React Js

I18next is a JavaScript-based internationalisation framework. But it goes far beyond that.

React, AngularJS, Vue.js, and many other front-end frameworks have integrations made by the i18next community.

I18next is also compatible with PHP, Node.js, iOS, Android, and other platforms.

I can now start to discuss how to incorporate i18next into the React Js project after defining what it is.

The following command will begin the installation of i18next using npm.

npm install i18next-http-backend i18next-browser-languagedetector --save

The following is how to import after installation.

import { useTranslation } from 'react-i18next';

Configure i18next

While react-i18next extends and connects it to react, i18next is the foundation of the i18n capability.

Alongside your index.js, create a new file called i18n.js with the following content:

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
const Languages = ['en','tr'];

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
  .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,
    whitelist: Languages,

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


export default i18n;

The const Languages variable here must contain the languages you intend to translate. (Line: 9)

Languages must be listed in init as a whitelist as well. (Line:25)

I use React Suspense to wrap the App /> after importing the i18n.js file I made into the index.js file.

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './i18n';

ReactDOM.render(
  <Suspense fallback="loading">
    <App />
    </Suspense>
,
  document.getElementById('root')
);

React Suspense

React’s unique suspense component enables us to render the dynamically loaded component while displaying backup content while it loads. The only prop given to the suspense component is fallback. Additionally, we define the content to be rendered in this fallback properties when there is a loading issue with the dynamic component or while waiting for it to load.

The functional component will then employ the useTranslation hook. And inside your functional component, use the useTranslation t function and the i18n instance.

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
    const {t, i18n} = useTranslation();
}

Later, I create a method called TranslateClick and pass the lang parameter as a parameter because the function would be based on clicking a button. You can select the language to use when calling the function in this way. I changed the language in this function using the i18n.changeLanguage function.

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
    const {t, i18n} = useTranslation();
    function TranslateClick(lang) {
        i18n.changeLanguage(lang);
    }
}

Yes, it is now time to use HTML tags to call the function.

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
    const {t, i18n} = useTranslation();
    function TranslateClick(lang) {
        i18n.changeLanguage(lang);
    }
  return(
    <div>
      <button onClick={()=>TranslateClick('tr')}></button>
      <button onClick={()=>TranslateClick('en')}></button>
    
   </div>
  )
}

The translateClick function, which I use with the onClick function, has parameters for the abbreviations I defined in the i18m.js file. (‘tr’, ‘en’)

The json files should now download translations.
I start by making a locales folder in the public folder for this. I then add the translations to this folder and create the tr and en directories.

Then I make translation.json files in these two folders.

I write the Turkish and English translations of the passages you will convert into these json files to build the json file.

{
    "Example":{
         "1": "Welcome",
         "2": "Translate",
         "3": "Trial"
         
    }
}



{
    "Example":{
         "1": "Hoşgeldiniz",
         "2": "Çeviri",
         "3": "Deneme"
    }
}

In this manner, the final step is to use the prepared structure rather than the text to be translated in HTML after writing the parts to be translated in the json file.

<h1>{t('Example.1')}</h1>
<h2>{t('Example.2')}</h2>
<h3>{t('Example.3')}</h3>

In this method, I can use the t function to access the data in the json file, and by pressing the Turkish-English buttons, I can switch to the json data I have provided.