Localisation with React.js

2025-08-22 — By Akshay Singh · 9 min read

Share this article:

If you’ve ever built a React app and thought “How will users from other countries use this?” then localisation is your answer. Adding internationalisation (i18n) ensures your app feels native to users in any region — whether they speak English, Hindi, Spanish, or Arabic. In this guide, I’ll walk you through setting up localisation in React using react-i18next, a library I’ve personally found reliable in real-world projects.

🚀 Why Localise Your React App?

Reach more users — your app becomes accessible globally.
Better UX — people prefer interfaces in their own language.
Inclusivity — handle cultural formats like dates and numbers correctly.
SEO benefit — localized pages can rank for regional queries.

When I first added Hindi translations to a React project, I noticed how much smoother the user experience became. Users actually stayed longer just because the UI felt familiar.

🧰 Prerequisites

A working React project (CRA, Vite, or custom)
Node.js & npm/yarn installed
Basic knowledge of React hooks

🔧 Step 1 — Install Dependencies

We’ll use react-i18next and i18next.

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

i18next-http-backend → loads JSON translation files.
i18next-browser-languagedetector → detects user language from browser, query, or cookies.

🏗 Step 2 — Create Translation Files

Inside public/locales create folders per language:

public/locales/
  en/translation.json
  hi/translation.json

Example English (en/translation.json):

{
  "nav": { "home": "Home", "about": "About", "contact": "Contact" },
  "hero": {
    "title": "Build faster with React",
    "subtitle": "Ship international-ready apps"
  },
  "footer": { "copyright": "© {{year}} My Company" }
}

Example Hindi (hi/translation.json):

{
  "nav": { "home": "घर", "about": "हमारे बारे में", "contact": "संपर्क" },
  "hero": {
    "title": "React के साथ तेज़ बनाएं",
    "subtitle": "अंतरराष्ट्रीय-तैयार ऐप्स लॉन्च करें"
  },
  "footer": { "copyright": "© {{year}} मेरी कंपनी" }
}

⚙️ Step 3 — Initialize i18next

Create src/i18n.js:

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

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    supportedLngs: ["en", "hi"],
    interpolation: { escapeValue: false },
    backend: { loadPath: "/locales/{{lng}}/{{ns}}.json" },
    react: { useSuspense: true },
  });

export default i18n;

Import ./i18n in your index.js / main.jsx before rendering <App />.

🧩 Step 4 — Use Translations in Components

import { useTranslation } from "react-i18next";

function Header() {
  const { t } = useTranslation();
  return (
    <nav>
      <a>{t("nav.home")}</a>
      <a>{t("nav.about")}</a>
      <a>{t("nav.contact")}</a>
    </nav>
  );
}

Dynamic values:

const year = new Date().getFullYear()
<p>{t('footer.copyright', { year })}</p>

🔁 Step 5 — Language Switcher

import { useTranslation } from "react-i18next";

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

  return (
    <select
      value={i18n.language}
      onChange={(e) => i18n.changeLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="hi">हिन्दी</option>
    </select>
  );
}

Persist the choice with localStorage for a better user experience.

🧠 Step 6 — Advanced Features

Lazy Loading Namespaces → load translations per module to reduce bundle size.
Pluralization →

{
  "notifications": "You have {{count}} notification",
  "notifications_plural": "You have {{count}} notifications"
}

<p>{t("notifications", { count: items.length })}</p>

RTL Support → for Arabic/Hebrew, set <html dir="rtl">.

⚠️ Common Mistakes to Avoid

Forgetting fallbackLng → app may break if user’s language isn’t supported.
Mixing inconsistent keys (home.title vs title.home).
Hardcoding text directly instead of using t().
Ignoring pluralization rules for different languages.

🔍 SEO & Accessibility Notes

Use hreflang tags for multilingual SEO if using SSR.
Translate meta descriptions and page titles.
Always provide fallback text for missing translations.

🧪 Testing

Mock useTranslation in unit tests.
Run E2E tests to confirm switching works.
Manually check formatting of numbers/dates in different locales.

✅ Final Tips

Start with one or two languages and expand.
Use a tool like Locize or Crowdin if you work with translators.
Keep translation keys semantic and consistent.

Localising React apps isn’t complicated once you set it up correctly. It not only helps you reach new audiences but also makes your app feel polished and professional.

Have you tried localisation in your React projects yet? Share your thoughts or issues in the comments — I’d love to hear how you approached it!