Internationalizing your React app with i18next

Nowadays, our applications have taken on proportions never before imaginable, and the web has given us the possibility to make it accessible all over the world. This is where many developers face a problem...

How do I get my app translated quickly and efficiently?

To our happiness, libraries like React have extremely easy alternatives to implement this functionality, and today, we are going to meet one of them, the i18next plugin.

Implementing internationalization

To start, let's go to our facilities. If you want to start an app from scratch, let's use the command below and create a new react app:

yarn create react-app i18napp --template typescript

If you already have a project or have just created yours, install the dependencies that we will need for i18next to work properly:

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Okay, now we already have the packages we need. Let's get your hands on the code!!!

Configuring i18next

To indicate to our app the use of internationalization and properly activate the hooks in it, we must prepare a file that will be next to our index.js, it will be called i18n.js and will contain the following lines:

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  // Enables the i18next backend
  .use(Backend)
  // Enable automatic language detection
  .use(LanguageDetector)
  // Enables the hook initialization module
  .use (initReactI18next)
  .init({
    // Standard language used
    fallbackLng: 'en',
    debug: true,
    //Detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    }
  })

export default i18n;

After that, we should import it into our index.js, which will look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

All set, react i18next is enabled and ready to use. Now the next step is to incorporate our translations.

Incorporating locales

Internationalizations on the web work on the basis of json with word sections. In this app, we will incorporate English and Portuguese.

For this, in our /public folder we will add the /locales folder that will have two subfolders, /en and /pt, both with a translation.json file that will contain the object with the translations. See an example of the file in English and the structure of the produced folder:

{
  "title": "Welcome to an internationalized APP",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and portuguese using buttons above."
  }
}

Locales folter structure

That done, let's get down to business with our homepage.

Customizing the App.js

Now let's go to our final part, building our home page. For this, we will delete the original content of App.js and leave only one div.

Importing the translation hook

To import the i18next hook we use the following code:

import {useTranslation} from "react-i18next";

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

The t attribute is used to incorporate our translation and i18n to observe changes in the state of the localization.

Using translation in tags

To use an attribute of our object, we just call the t() function that we have destructured above:

   <div><h1>{t("title")}</h1></div>

See how easy it is?

We will complete our app with the code below by adding two buttons that will change the language and see the magic in real time...

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

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

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="App">
      <button onClick={() => changeLanguage("en")}>EN</button>
      <button onClick={() => changeLanguage("pt")}>PT</button>
      <hr />
      <div><h1>{t("title")}</h1></div>
      <div>{t("description.part1")}</div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

export default App;

Observing the magic

If you entered the code correctly, the magic below should happen to your app. Translation is done at runtime.

Did you liked? The code is available on my github.

Thanks for reading!!!