React Integration

Learn how to integrate i18next with React applications for internationalization.

Integrate i18next with your React application (v18.2.0+) to support multiple languages using Lengrise-managed translations.

Prerequisites

  • React application (v18.2.0+)
  • Node.js (v16.0.0+)
  • Package manager (npm,yarn,npm)
  • Translations downloaded from Lengrise

Pull Translation Files

First, you must pull your translation files from Lengrise API. These files will contain all the translated text for your application.

  1. Go to the Installation Guide and follow the steps to download your translations
  2. Place the downloaded JSON files in your project as shown in the project structure below
  3. Ensure that each language has its own JSON file named with the language code (e.g., en.json, es.json)

Integration Setup

After downloading your translation files, install the necessary i18next packages:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save

Project Structure

package.jsonadd
tsconfig.jsonadd
i18n.tsadd
index.tsxadd
App.tsxadd
publicadd
localesadd
en.jsonadd
es.jsonadd
componentsadd
LanguageSwitcher.tsxadd

Configuration Steps

1. Set up i18n configuration

Create a file called i18n.ts in your project root:

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

// Initialize i18next
i18next
  // Load translations using http backend
  .use(Backend)
  // Detect user language
  .use(LanguageDetector)
  // Pass the i18n instance to react-i18next
  .use(initReactI18next)
  // Initialize i18next
  .init({
    // Default language
    fallbackLng: "en",
    // Debug mode in development
    debug: process.env.NODE_ENV === "development",

    // Backend configuration to load translations
    backend: {
      // This points to the /public/locales/{language-code}.json files
      loadPath: "/locales/{{lng}}.json",
    },

    // Disable escaping since React handles this
    interpolation: {
      escapeValue: false,
    },
  });

export default i18next;

2. Initialize i18n in your application

Import the i18n configuration in your application entry point (index.tsx):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./i18n"; // Import i18n configuration

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Using Translations

Basic Usage

Use the useTranslation hook to access translations:

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

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t("welcome.title")}</h1>;
}

Creating a Language Switcher

Add a component to switch between languages:

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

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  return (
    <div>
      <button onClick={() => i18n.changeLanguage("en")}>English</button>
      <button onClick={() => i18n.changeLanguage("es")}>Español</button>
    </div>
  );
}

export default LanguageSwitcher;

Using Translation Variables

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

function Greeting({ name }) {
  const { t } = useTranslation();
  return <p>{t("greeting", { name })}</p>;
}

In your translation file:

{
  "greeting": "Hello, {{name}}!"
}

Resources

For more detailed information, check out these resources: