Q197- How do you localize React applications?

What Is Localization (i18n)?

Localization means adapting your React app to display content, dates, numbers, and UI text in the user’s preferred language and locale.

Example: showing "Hola" for Spanish users instead of "Hello", or formatting dates/numbers differently across regions.

---

⚙️ 1. Common Libraries for Localization in React

Library	Description
react-intl	Part of the FormatJS suite — rich message formatting
react-i18next	Based on i18next, very popular and flexible
LinguiJS	Focused on developer-friendly syntax
next-intl / next-i18next	For localization in Next.js apps

---

🧩 2. Example Using react-i18next

🛠 Step 1: Install dependencies

npm install react-i18next i18next

---

🧠 Step 2: Create translation JSON files

public/locales/en/translation.json
public/locales/es/translation.json

translation.json (English):

{
  "welcome": "Welcome to My Website",
  "login": "Login"
}

translation.json (Spanish):

{
  "welcome": "Bienvenido a Mi Sitio Web",
  "login": "Iniciar sesión"
}

---

⚙️ Step 3: Configure i18n

Create a file i18n.js:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: require("./locales/en/translation.json") },
    es: { translation: require("./locales/es/translation.json") },
  },
  lng: "en", // default language
  fallbackLng: "en",
  interpolation: { escapeValue: false },
});

export default i18n;

---

🧩 Step 4: Wrap your app with the i18n provider

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./i18n";

ReactDOM.render(<App />, document.getElementById("root"));

---

🧠 Step 5: Use translations in components

// App.js
import React from "react";
import { useTranslation } from "react-i18next";

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

  const changeLanguage = (lang) => i18n.changeLanguage(lang);

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("es")}>Español</button>
      <p>{t("login")}</p>
    </div>
  );
}

✅ When you click “Español”, it changes language dynamically.

---

📅 3. Formatting Dates, Numbers, and Currencies

Use the Intl API (built into JavaScript) or the react-intl library.

Example:

const date = new Date();
const formatted = new Intl.DateTimeFormat("fr-FR", {
  day: "numeric",
  month: "long",
  year: "numeric",
}).format(date);

console.log(formatted); // e.g., "2 novembre 2025"

---

🌐 4. Detecting User’s Language Automatically

You can detect and set language automatically using:

• Browser language: navigator.language
• GeoIP / user settings
• react-i18next-browser-languagedetector

Example:

npm install i18next-browser-languagedetector

import LanguageDetector from "i18next-browser-languagedetector";
i18n.use(LanguageDetector).use(initReactI18next).init({...});

---

🧱 5. Summary

Concept	Description
Goal	Show UI text and formats in user’s language
Main library	react-i18next
Data source	JSON translation files
Dynamic switching	i18n.changeLanguage(lang)
Advanced formatting	Use Intl API or react-intl

---

In short:

React localization (i18n) means using libraries like react-i18next or react-intl to translate text, format dates/numbers, and adapt your app to multiple languages and regions dynamically.