Implementado Multiples Lenguajes en React

Adrian Galicia • July 24, 2020

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

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-ingles

Ejemplo en español

ejemplo-espanol

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