Adding Multilanguage Support to CRA with React-i18next Module

React-i18next is one of the best options for multi-language apps among many libraries in which you may be lost.

Supporting an app with different languages is one of the hardest jobs in front-end development. Not only selecting the right framework for your needs but also the management of language support is no easy job. In this article, I will focus on helping you out about the decision you have to make and giving you a glimpse of how you can jump into it.

Why React-i18next ?

Until I have to, I have never thought of multi-language support as a self learning Front-end Developer. If you are working in a company that provides any product to customers all around the world, you have another thing that you add to your “to be learned” list.

After a well thought process, I decided that I will sail with React-i18next. I think this framework is easy to use and reliable 297 kb ❤ As a classy option to have, it has an easy to integrate localization management solution if you want. I can’t write this article without mentioning its perfect support for hooks and availability of many modules of i18next.

What impressed me the most was that this framework was put together to solve internationalization process only in React which makes a good choice for CRA.

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.

What this framework offers

If you decide to use React-i18next, you can,

1.Add translation keys with your preference of use (It provides useTranslation (hook), withTranslation (HOC), Translation (render prop) and Trans Component)

2.Manage your translation process with a localization management solution

3.Detect your user’s language with its plugin, i18next-browser-languageDetector

4.Save kb by splitting your language files with i18next-http-backend

5.Extract keys from JavaScript file to JSON file with i18next-parser

Basic Usage

Before starting, create a simple CRA

npm create-react-app react-i18next-example
cd react-i18next-example
npm start

Install React-i18next

npm install react-i18next i18next
npm install i18next-browser-languagedetector // for language detect
npm install i18nex-http-backend // for backend integration

After successful installation, next step is to configure i18next.

Since I am using i18next-browser-languageDetector, I am not defining the language in configuration file. I let the plugin decide and if the language is supported by my project, i18next-http-backend plugin, which I added by .use(Backend), loads the translation files for user’s language.

If the language is not supported, it loads translation files for English, as specified in configuration file (fallbackLng).

You can also set debug parameter to true if you would like to see what is going on behind the scenes, which I recommend.

Now, you have to create your translation files. If you are using i18next-http-backend plugin, you should put your files in public folder to reduce bundle size.

Your folder structure should look like this.

Since I love hooks, I will be giving you an example usage with useTranslation hook.

import React from "react";
import { useTranslation } from "react-i18next";
function App() {
  const { t, ready } = useTranslation();
  if (ready) {
    return (
      <div className="App-header">
        <h2>{t("Welcome_to_React")}</h2>
      </div>
    );
  }
  return <span>Loading...</span>;
}
export default App;

You can call your translations with t function which takes translation key as a parameter and as a noteworthy mention, React-i18next expects you to use Suspense by default, however if you plan to use this framework in production and you do not want to use “suspense” yet, you have to deal with loading process by yourself. Hopefully lovely hook gives us “ready” which we can control/check whether translations are loaded. Otherwise, you will be getting a nasty error. You should also disable it in configuration by “useSuspense: false”

I also made a sandbox if you want to take a look, play a little.

Happy Coding!!!

Also published on Medium.