🌐 Add Multiple Languages to Your React App Using react-i18next

#coding #programming #react #softwaredevelopment

May 6, 2025

Recently, I updated the frontend of a React app to support multiple languages using react-i18next, enabling a seamless experience for both English and Spanish users. This approach helps build more inclusive applications — and it’s easier than I thought before trying it!

Want to build a modern multilingual frontend for your Rails app? Or improve your current UI with React?

Let’s talk! Contact me here

Installation

To get started, I installed the following packages:


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

These libraries work together to detect the user’s language, load translations, and integrate them into your React components.

i18n.js – Core i18n Configuration


// src/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';

import enTranslations from './locales/en.json';
import esTranslations from './locales/es.json';

i18n
  .use(LanguageDetector)
  .use(XHR)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      es: { translation: esTranslations },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

Translation Files

locales/en.json


{
  "welcome": "Welcome to React",
  "home": "Home",
  "about": "About",
  "vehicles": "Vehicles",
  "contact": "Contact",
  "hello": "Hello, {{name}}!"
}

locales/es.json


{
  "welcome": "Bienvenido a React",
  "home": "Inicio",
  "about": "Acerca de ShipCheap",
  "vehicles": "Vehículos",
  "contact": "Contáctanos",
  "hello": "¡Hola, {{name}}!"
}

Updated index.js


import React from "react";
import ReactDOM from "react-dom/client";

import "./i18n"; // Load translations

import Header from './layout/Header';
import Footer from './layout/Footer';
import Users from './Users';

function App() {
  return (
    <div className="App">
      <Header />
      <Users />
      <Footer />
    </div>
  );
}

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

Header.js with Language Toggle and Menu


import React from "react";
import logo from "./assets/images/logo_header.jpg";
import { useTranslation } from "react-i18next";

function Header() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <img src={logo} alt="Logo" />
      <nav className="menu">
        <ul className="menu-list">
          <li><a href="/">{t('home')}</a></li>
          <li><a href="/about">{t('about')}</a></li>
          <li><a href="/vehicles">{t('vehicles')}</a></li>
          <li><a href="/contact">{t('contact')}</a></li>
        </ul>

        <button onClick={() => changeLanguage('en')}>English</button>
        <button onClick={() => changeLanguage('es')}>Español</button>
      </nav>
    </div>
  );
}

export default Header;