Getting Started with Internationalization for React Apps with the react-i18next NPM Package

If we want to add localization to a React app, we can use the react-i18next NPM package to do it.

In this article, we’ll look at how to add the package and add some translations to our apps.

Installation

To install the required packages, we run:

npm install react-i18next i18next --save

i18next provides the translation functionality and react-i18next is the React wrapper for it.

Adding Translations

Once we installed the packages, we have to initialize the library with some configuration and add some translations.

To do that, we write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",

  keySeparator: false,

  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Translation>{(t) => <h1>{t("Welcome to React")}</h1>}</Translation>
    </div>
  );
}

We have the resources object with the translations.

Then we call i18n.use to initialize the react-i18next package.

keySeparator indicates whether we want to add a key separator character.

interpolation lets us change interpolation settings.

escapeValue set to false means we don’t want to escape the input.

lng sets the language.

resources has the translations.

Once we configured it, we can use the Translation component to add our translation.

We just pass in the key for the translation into the object.

Also, we can use the hook to add translations:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation, useTranslation } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",

  keySeparator: false,

  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  const { t } = useTranslation();

  return (
    <div className="App">
      <h1>{t("Welcome to React")}</h1>
    </div>
  );
}

The t function returns the translated string in both examples.

useTranslation Hook

The useTranslation hook lets us get translations and set the language.

For example, we can write:

import React, { useEffect } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue dans React et react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  const { t, i18n } = useTranslation();
  useEffect(() => {
    i18n.changeLanguage("fr");
  }, []);

  return (
    <div className="App">
      <p>{t("Welcome to React")}</p>
    </div>
  );
}

We called the changeLanguage method to change the language to French.

So we’ll see the translations displayed.

Conclusion

We can add translations easily to a React app with the react-i18next NPM package.