Unlock the Power of Localization: A Step-by-Step Guide to i18next in React

Getting Started with i18next

To begin, we’ll create a simple React project using Node.js. Our focus will be on the src folder, where we’ll find all our React components containing content to be localized. Next, we’ll install the i18next and react-i18next packages, which provide translation functionalities and additional React features, respectively.

npm install i18next react-i18next

Setting Up the Configuration File

In the src folder, we’ll create an i18n.js file to configure our translation setup. Here, we’ll define our translation configuration, including the resources, language, and fallback language. We’ll also import the i18n instance and bind it to the react-i18next module.

import i18n from 'i18next';
import { initReactI18next } from 'eact-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        header: {
          title: 'Welcome to our application',
        },
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
});

Translating a Simple Text Message

Now, let’s translate a simple header message in our starter project. We’ll update the src/i18n.js file to include English and Japanese translations, and then access the translated message using the t() function provided by i18next.

import i18n from 'i18next';
import { initReactI18next } from 'eact-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        header: {
          title: 'Welcome to our application',
        },
      },
    },
    ja: {
      translation: {
        header: {
          title: '全国のアプリケラション',
        },
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
});

function Header() {
  return (

  );
}

Lazy Loading Translation Files

To optimize our code, we’ll separate translations from the code and load them when required. We’ll install the i18next-http-backend package, which loads translation files from the backend server. Then, we’ll create translation files for each supported language and update our configuration file to include the plugin.

npm install i18next-http-backend

import i18n from 'i18next';
import HttpApi from 'i18next-http-backend';

i18n.use(HttpApi).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

Interpolation, Formatting, and Pluralization

Next, we’ll explore how to format and translate text-rich messages, considering cultural differences, numbers, dates, and currency placement. We’ll use interpolation to insert values into our translations and update our configuration file to include a format function.

i18n.init({
  interpolation: {
    format: function(value, format, lng) {
      // formatting logic
    },
  },
});

Detecting a User’s Language

To provide an option for users to switch languages, we’ll install the i18next-browser-languagedetector plugin, which detects the user’s language from the URL path, localStorage, or other specified storage. We’ll then update our configuration file to include the plugin and remove the lng property.

npm install i18next-browser-languagedetector

import LanguageDetector from 'i18next-browser-languagedetector';

i18n.use(LanguageDetector).init({
  detection: {
    order: ['path', 'localStorage'],
  },
});

Creating a Language Switcher

Finally, we’ll create a language switcher by adding a dropdown element to our header component. We’ll use the js-cookie package to read the locale string from the storage and update the application language using the i18n instance.

npm install js-cookie

import Cookies from 'js-cookie';

function Header() {
  const handleLanguageChange = (lng) => {
    i18n.changeLanguage(lng);
    Cookies.set('locale', lng);
  };

  return (

  );
}