Implementado Multiples Lenguajes en React

Introducción

En esta ocasión vamos a escribir un ejemplo que ilustra cómo podemos agregar diferentes lenguajes en nuestras aplicaciones React con react-i18next.

Lo primero que vamos a hacer es generar una aplicación React sencilla utilizando create-react-app

npx create-react-app app-multilenguaje

Instalando dependencias

• react-i18next
• i18next

yarn add react-i18next i18next

Creando nuestro archivo de traducciones

Vamos a crear nuestro archivo src/i18n.js y escribimos el siguiente código

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  es: {
    translation: {
      sign_in: 'Iniciar Sesión',
      password: 'Contraseña',
      email: 'Correo electrónico',
      next: 'Siguiente',
    },
  },
  en: {
    translation: {
      sign_in: 'Sign in',
      password: 'Password',
      email: 'Email',
      next: 'Next',
    },
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en',

  keySeparator: false,

  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

Escribiendo nuestro componente con traducción

Para hacer uso de nuestras traducciones vamos a importar el hook useTranslation del paquete react-i18next. Este hook nos devuelve un método llamado t que es el que usaremos para nuestras traducciones acá un ejemplo {t('key_de_nuestra_traduccion')}

import React from 'react';
import './i18n';

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div className="container">
      <div className="row mt-5">
        <div className="col-md-8 offset-md-2">
          <button
            type="button"
            className="btn btn-secondary"
            onClick={() => i18n.changeLanguage('es')}
            disabled={i18n.language === 'es'}
          >
            {t('change_language_es')}
          </button>
          <button
            type="button"
            className="btn btn-primary ml-2"
            onClick={() => i18n.changeLanguage('en')}
            disabled={i18n.language === 'en'}
          >
            {t('change_language_en')}
          </button>
        </div>
      </div>
      <div className="row mt-5">
        <div className="col-md-8 offset-md-2">
          <div className="card">
            <div className="card-header">{t('sign_in')}</div>
            <div className="card-body">
              <form>
                <div className="form-group">
                  <label for="exampleInputEmail1">{t('email')}</label>
                  <input
                    type="email"
                    className="form-control"
                    id="exampleInputEmail1"
                    aria-describedby="emailHelp"
                  />
                  <small id="emailHelp" className="form-text text-muted">
                    {t('email_advice')}
                  </small>
                </div>
                <div className="form-group">
                  <label for="exampleInputPassword1">{t('password')}</label>
                  <input
                    type="password"
                    className="form-control"
                    id="exampleInputPassword1"
                  />
                </div>
                <button type="submit" className="btn btn-primary">
                  {t('submit')}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Y aquí les muestro como luciría nuestra app con traducciones, además de las traducciones agregué una función para cambiar el lenguaje.

Ejemplo en inglés

Ejemplo en español

Espero que este ejemplo les sirva para sus proyectos, sí es así corran la voz, hasta pronto 🤙