Internationalizing Your React App with i18next and React-i18next

What is Internationalization ?

Internationalization is simply the process of making something international. So when you say you want to "internationalize" your app, you basically mean you want to make it available in multiple languages.

Enter i18next. i18next is one of the many tools out there that serves the purpose of internationalizing your app. According to its documentation, it is an internationalization framework written in and for JavaScript. Do not confuse it with "i18n," which is just a short way of writing "internationalization." Unlike some other tools, i18next helps you with language detection, loading your translations, and caching your translations, amongst other cool features.

Even though i18next can be used alongside a lot of frameworks and libraries like Angular, React, Node.js, Vue and many more, we’ll be focusing in this article on adding i18-next to our react-app using React-i18next. React-i18next is just a Reactjs version of i18next, for easy integration into a react-app. So we’ll go into some basic functionality performed by the React- i18next tool, this is by no means an exhaustive list of every possibility with the React-i18next tool, but it shows a basic setup needed to at least get you started on internationalization of your app with a few languages.

N.B: This article assumes you already have knowledge of React and how it works.

• To get started, you have to add the tool to your react-app

using npm:

npm install react-i18next i18next -–save

using yarn

yarn add react-i18next i18next –-save

N.B: You can also load from CDN if that’s what interests you

• There are two major ways to translate your content

First:

React-i18next provides a “ t ” function from the useTranslation hook that can be used for your translation. This function takes a parameter which is the key of the particular content to be translated.

It usually takes the form

const { t } = useTranslation()

Usage:

Before:

<div> My Content </div>

After:

<div> {t(‘My’)}</div>

Second:

Another way you can translate is by using the Trans component, this is usually used if you want to include html formatting or some other components into your translation.

It usually takes the form

<Trans i18nKey="someValue">
  Some Fallback text
</Trans>

Usage:

Before:

<div>
  This is <strong title=”the user name”> {name} </strong>, he is {age} years old
</div>

After:

<Trans i18nKey=”userAge” age={age}>
  This is <strong title={t(”the user name”)}> {{name}} </strong>, he is {{age}} years old
</Trans>

These are the translation methods offered by react-i18next, so you can choose any one of them depending on your needs.

Let’s take a look at a simple example, with the assumption that we already have a react project setup.

• First we import all necessary files in our index.js file

import React from "react";
import { createRoot } from 'react-dom/client';
import i18n from "i18next";
import { useTranslation, initReactI18next, Trans } from "react-i18next";

• Next we specify our i18next configuration

N.B: This can be done in its’ own file and then imported into the top level component of our app that needs the functionality, but for brevity, we’ll do everything in one file but hopefully you get the gist.

i18n
  .use(initReactI18next) // passes i18n down to react-i18next

  .init({
  // the translations
  // (tip move them in a JSON file and import them,
  // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)

    resources: {
      en: {
        translation: {
          "Welcome to React": "Welcome to React and react-i18next"
        }
      }
    },

    lng: "en", // if you're using a language detector, do not define the lng option
  
    fallbackLng: "en",
  
    interpolation: {
  
      escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    }

  });

• Now let us declare our simple App function

function App() {
  return (
    <div>
      <h2>My name is John Reach</h2>
      <span> I am a <strong>frontend</strong> developer </span>
      <p> This is me trying to learn <i>React-i18next</i></p>
    </div>
  );
}

// append app to dom
const root = createRoot(document.getElementById('root'));
root.render(
  <App />
);

Sample Output when you run the app normally

Now let’s add internationalization using the useTranslation hook and the Trans component.

The app component becomes

function App() {
  
  const { t } = useTranslation( )

  return (
    <div>
      <h2>{t(‘my name’)}</h2>
      <span> I am a <strong>frontend</strong> developer </span>
      <p> This is me trying to learn <i>React-i18next</i></p>
    </div>
  );
}

As we can see above, we first created our t function using the useTranslation hook and then we replaced the h2 tag content with the t function and the key. Now let us add the key to our i18next config, in the resources object.

…
  resources: {
    en: {
      translation: {
        "my name": "My name is John Reach"
      }
    }
  },
…

After doing this we go on to add translations to our <Span> and <p> tags. Note that we have other HTML tags embedded in these tags, so let us use the <Trans> component instead of the usual t function.

NOTE: Not all HTML tags work as expected when translating with Trans component, some tags work differently, generating indexed nodes and all. Refer to the documentation for more information on this.

<span>
  <Trans i18nKey=”role”>
    Fallback Text
  </Trans>
</span>
<p>
  <Trans i18nKey=”goal”>
    Fallback Text Goal
  </Trans>
<p>

If for any reason, the Trans component does not recognize a key, the fallback Text is used as seen in this image.

Sample Output for above code

Now let us add our key value pairs to the resources object.

…
  resources: {
    en: {
      translation: {
        "my name": "My name is John Reach",
        “role”: “I am a <strong>frontend</strong> developer,
        “goal”: “This is me trying to learn <i>React-i18next</i>”
      }
    }
  },
…

We can see that we have set up our app for translations and our app remains the same.

Sample Output for above code

Let’s add translated content for French and watch the app change language content.

In our resources object, let us add a “fr”object for French language.

…
  resources: {
    en: {
      translation: {
        "my name": "My name is John Reach",
        “role”: “I am a <strong>frontend</strong> developer,
        “goal”: “This is me trying to learn <i>React-i18next</i>
      }
    },
    fr: {
       translation: {
        “my name”: “Je m'appelle John Reach”,
        “role”: “Je suis développeur <strong>frontend</strong>",
        “goal”: “C'est moi qui essaie d'apprendre<i>React-i18next</i>
      }
    }
  },
…

So now if we change our language to fr manually in the config, we’ll see our language change

…
  lng: “fr”,
…

Sample Output for above code

Note that in place of changing of the language manually in the config, i18next allows us use its “changeLanguage” function which we can attach to a toggle function.

We can also setup our app to automatically detect the device language with the languageDetect functionality offered to us. These are a few among the many other features available to us from i18next.
You can check the docs for a lot more functionality to suit your use-case, but with the above setup, you can get your app up and running with the basic translation functionality of i18next.

For a much more detailed explanation of how this tool work, refer to the following documentations

· https://www.i18next.com/overview/getting-started

· https://react.i18next.com/getting-started

I hope this was helpful in some way. Cheers