Cómo implementar multiidioma en react en 3 pasos

Aprende a utilizar la librería react-i18next para implementar la funcionalidad de múltiples idiomas en nuestras aplicaciones de React.

Paso 1: Instalar react-i18next

Para instalar la dependencia, ejecutamos el siguiente comando en nuestra terminal:

npm install react-i18next i18next --save

Paso 2: Agregar i18n a toda la aplicación

Dirígete al archivo principal donde se renderiza toda tu aplicación, que podría ser _app.tsx o main.tsx si estás utilizando Vite.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import englishContent from "./lang/en.json";
import spanishContent from "./lang/es.json";

i18n.use(initReactI18next).init({
    resources: {
        en: englishContent,
        es: spanishContent,
    },

    fallbackLng: "en",

    interpolation: {
        escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    },
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Paso 2.1: Agrega tus traducciones

Crea una carpeta src/lang y agrega tus respectivos idiomas. Por ejemplo, si el contenido de tu archivo JSON está en español, nómbralo como es.json:

{
  "translation": {
    "home": {
      "welcome": "Bienvenido a este tutorial"
    },
    "blog": {
      "description": "Este post te será de mucha ayuda"
    }
  }
}

Paso 3: Listo, ahora solo queda probarlo
En tu componente App.tsx, puedes utilizar el hook useTranslation de react-i18next para acceder a las traducciones.

import { useTranslation } from "react-i18next";

function App() {
    const { t } = useTranslation();

    return (
        <main>
            <h2>{t("home.welcome")}</h2>;
        </main>
    );
}

export default App;

¡Característica adicional! Selector de idioma!

Puedes implementar un selector de idioma para permitir a los usuarios cambiar el idioma de tu aplicación fácilmente. Primero, crea el componente:

import { useEffect, useState } from "react";
import ReactFlagsSelect from "react-flags-select";
import { useTranslation } from "react-i18next";

function LangSelector() {
    const { i18n } = useTranslation();
    const [lang, setLang] = useState("EN");

    const getUserBrowserLanguage = () => {
        const lang = window.navigator.language;

        if (lang.includes("es")) return "es";
        if (lang.includes("en")) return "en";

        return "en";
    };

    const countryCodeToLangCode = (countryCode: string) => {
        const country = countryCode.toLowerCase();

        if (country.includes("us")) return "en";
        if (country.includes("es")) return "es";

        return "en";
    };

    const handleLangSelect = (countryCode: string) => {
        const currentLang = countryCodeToLangCode(countryCode);
        i18n.changeLanguage(currentLang);

        setLang(countryCode);
    };

    useEffect(() => {
        const userBrowserLang = getUserBrowserLanguage();

        i18n.changeLanguage(userBrowserLang);
        setLang(userBrowserLang);
    }, []);

    return (
        <ReactFlagsSelect
            countries={["US", "ES"]}
            customLabels={{ US: "EN", ES: "ES" }}
            selected={lang.toUpperCase()}
            onSelect={handleLangSelect}
        />
    );
}

export default LangSelector;

Ahora puedes colocarlo en cualquier sitio de tu aplicacion!

Este componente cuando se cargue la página cargara por defecto el idioma predeterminado del navegador.

Con esto tendrás todo lo necesario para que tu aplicación funcione. Si este artículo te ha sido útil, ¡no dudes en dejar un "me gusta" ❤️!

Asi se deberia de ver la estructura de la aplicacion: