Add Multilanguage Support to Your React App

How you can internationalize your React app today

Image by Chigabiga via unDraw

I shifted from Angular to React and have been working on it for quite some time. I love how React is evolving day by day and is becoming a powerful library for UI development.

Most developers prefer React for front-end development. It’s simpler and can be grasped easily. Its performance; virtual DOM; and flexible, component-based approach made it distinctive. I worked on multiple projects in React while I was working. One of the projects required an internationalization feature for multiple languages.

react-i18next

I came across the i18next framework for internationalization, which is written in JavaScript. It provides a complete solution to localize your product.

To add internationalization in React we use react-i18next based on i18next. This module provides multiple components to render content translations when the language changes.

We can use it on any UI framework (Angular, React, Vue, etc.) and on the server side as well (e.g., Node.js).

Simple Demo

Implementation in React

First, you have to install i18next by npm or yarn:

npm install react-i18next i18next — save

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

Through http-backend and browser-languagedetector, it’ll detect the user language and load the translations.

After installation, you have to create a i18nextConf.js file next to index.js in order to add configurations of i18next, which will detect and load the translation content.

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

const fallbackLng = ['en'];
const availableLanguages = ['en', 'ar', 'fr'];

i18n
  .use(Backend) // load translations using http (default…