Building Single Page Applications (SPA) in React JS that require multi-language support require a way for the user to be able to select the preferred language and all or specific text on the page or site should change.

React supports a package i18next that helps load the default language and save the preferred language which the user selects from the UI. react-i18next is built on top of i18next and is a powerful internationalization framework for React JS. This post explains i18n usage for v10 or above.

This example is built on top of my other post for Client-side routing here.

You can find the i18n demo code in my Github profile here.

You need to install the package react-i18next using npm as below:

npm install i18next
npm install react-i18next

Initialize the i18next store placed under the config folder as below:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "../locales/en";
import fr from "../locales/fr";
import it from "../locales/it";
import de from "../locales/de";
import es from "../locales/es";
i18n.use(initReactI18next).init({
  resources: {
    en,
    fr,
    it,
    de,
    es
  },
  fallbackLng: "en",
  debug: true,
  ns: ["translations"],
  defaultNS: "translations",
  keySeparator: false,
  interpolation: {
    escapeValue: false,
    formatSeparator: ","
  },
  react: {
    wait: true
  }
});
export default i18n;

The i18n package has a provider which would wrap your react App component.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { I18nextProvider } from "react-i18next";
import i18n from "./config/i18n";
import "bootstrap/dist/css/bootstrap.min.css";
ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <Router>
      <App />
    </Router>
  </I18nextProvider>,
  document.getElementById("root")
);

Maintain your translation files under the Locales folder and make sure the namespace matches the one provided in the i18next store initialization.
Example translation here:

{
  "translations": {
    "title": "<0>Acerca de</0>",
    "intro": "<0>Esta es la página Acerca de.</0>"
  }
}

The text in the About page is translated as below using the locales:

import React from "react";
import { Trans } from "react-i18next";

const AboutPage = () => (
  <div>
    <Trans i18nKey="title">
      <h2>About</h2>
    </Trans>
    <Trans i18nKey="intro">
      <p>This is the About page.</p>
    </Trans>
  </div>
);

export default AboutPage;

The i18nKey matches the specific text to be translated under the namespace.

The HomePage.js code has a drop-down change language event that will change the translation in the About page when selected.

changeLang = lang => {
    const { i18n } = this.props;
    const { value } = lang;
    this.props.changeLang(lang);
    this.setState({ lang });
    i18n.changeLanguage(value);
  };

The app is hosted on IIS Server. Check out the post here on how to host react app on IIS.

There is also a branch in Github here, that explains the i18n legacy version usage i.e. till v9.

Fix your belly and change your life. Click here to know more.