react-i18next

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.

Refer to official documentation for detailed usage. →

superplate serves an optional i18n plugin that sets translation feature using react-i18next.

i18n.js

import i18n from "i18next";import { initReactI18next } from "react-i18next";
const resources = {  en: {    translation: {      hello: "Hello",      greet: "Hello, {{name}}!",      documentation: "Go To Documentation",    },  },  tr: {    translation: {      hello: "Merhaba",      greet: "Merhaba, {{name}}!",      documentation: "Dökümantasyona Git",    },  },};
i18n  .use(initReactI18next)   .init({    resources,    lng: "en",
    keySeparator: false,
    interpolation: {      escapeValue: false,    },  });
export default i18n;

How to use react-i18next?#

Use changeLanguage() method of i18n to set current language and trigger the language change manually.

t() function can be used to fetch the translation.

You can specify key as a String. It resolves key-value pair from i18n.js file and returns value as a string.

"components/examples/translate

import React from "react";import { useTranslation } from "react-i18next";
export const TranslateExample: React.FC = () => {  // https://react.i18next.com/guides/quick-start#translate-your-content  const { t, i18n } = useTranslation();
  const changeLanguage = (lang) => i18n.changeLanguage(lang);
  return (    <div>      <header>        <h2>{t("hello")}</h2>        <div>          <button onClick={() => changeLanguage("tr")}>🇹🇷 Türkçe</button>          <button onClick={() => changeLanguage("en")}>🇺🇸 English</button>        </div>      </header>      <main>        <p>{t("greet", { name: "World" })}</p>      </main>      <footer>        <a          href="https://react.i18next.com/"          target="_blank"          rel="noopener noreferrer"        >          {t("documentation")}        </a>      </footer>    </div>  );};

Adding react-i18next to your project later#

npm
yarn

npm install react-i18next i18next --save

 yarn add react-i18next i18next

Create a new file i18n.js beside your index.js containing following content

src/i18n.js

import i18n from "i18next";import { initReactI18next } from "react-i18next";
// the translations// (tip move them in a JSON file and import them)const resources = {  en: {    translation: {      "Welcome to React": "Welcome to React and react-i18next"    }  },  fr: {    translation: {      "Welcome to React": "Bienvenue à React et react-i18next"    }  }};
i18n  .use(initReactI18next) // passes i18n down to react-i18next  .init({    resources,    lng: "en",
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {      escapeValue: false // react already safes from xss    }  });
  export default i18n;

Then import that in index.js:

index.js

import React, { Component } from "react";import ReactDOM from "react-dom";import './i18n';import App from './App';
// append app to domReactDOM.render(  <App />,  document.getElementById("root"));

Translate your content#

Learn more about translate →