Overview of Building a Language Selector in React

Technical React

These days, not everyone who visits your React app will speak English. Maybe you’re building a personal portfolio, an online shop, or a SaaS product — chances are, people from around the world will use it. Adding support for multiple languages makes your app feel more welcoming and easier to use.

That’s where localization comes in. In this guide, we’ll walk through how to build a simple language selector in React using react-i18next, one of the most popular libraries for handling internationalization.

What is Localization in React?

Localization (often called l10n) means adapting your application for different languages and regions.

For example:

English: Hello, welcome!
Spanish: Hola, bienvenido!
French: Bonjour, bienvenue !

When your app can easily switch between these languages, you’ve successfully localized it.

Step 1: Setting Up the React App

If you don’t have a React project yet, let’s create one using Vite.

In your terminal, run:

npm create vite@latest react-app

When prompted:

Framework: React
Variant: JavaScript

Then install dependencies and start the dev server:

cd react-app
npm install
npm run dev

Open your browser at the URL shown in the terminal (usually http://localhost:5173).

Step 2: Install Localization Packages

We’ll use react-i18next and i18next for localization.

npm install react-i18next i18next

Step 3: Create Translation Files

Inside src, create a locales folder with subfolders for each language.

Folder structure:

src/
  locales/
    en/translation.json
    es/translation.json

English translation (src/locales/en/translation.json):

{
  "welcome": "Hello, welcome!",
  "description": "This is a multi-language React app."
}

Spanish translation (src/locales/es/translation.json):

{
  "welcome": "¡Hola, bienvenido!",
  "description": "Esta es una aplicación React multilingüe."
}

Step 4: Initialize i18next

Create a new file src/i18n.js and set up your language configuration:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enTranslation from "./locales/en/translation.json";
import esTranslation from "./locales/es/translation.json";
i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslation },
      es: { translation: esTranslation }
    },
    lng: "en", // default language
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    }
  });
export default i18n;

Step 5: Load i18n in Your App

In src/main.jsx (Vite’s entry file), import your i18n config:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./i18n"; // import i18n config
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Step 6: Create the Language Selector

In src/App.jsx:

import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
function App() {
  const { t, i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
    localStorage.setItem("lang", lng);
  };
  // Load saved language on refresh
  useEffect(() => {
    const savedLang = localStorage.getItem("lang");
    if (savedLang) {
      i18n.changeLanguage(savedLang);
    }
  }, [i18n]);
  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>{t("welcome")}</h1>
      <p>{t("description")}</p>
      <div>
        <button onClick={() => changeLanguage("en")}>English</button>
        <button onClick={() => changeLanguage("es")}>Español</button>
      </div>
    </div>
  );
}
export default App;