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;
🚀 Results
✅ Users can switch between English and Spanish in real time
✅ Structure allows easy addition of new languages
✅ Clean separation between content and logic
Check out the full PR here: 🔗 https://github.com/ggerman/frontend/pull/1
Now open for 2026 sponsorships 