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

Photo by Kyle Glenn on Unsplash

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 (…