i18next in react app

Implementar i18n en reactjs con ayuda de i18next.

Problema

Implementar i18n en una web app creada que usa reactjs.

i18n (internacionalización) : Es el proceso de diseñar software de manera tal que pueda adaptarse a diferentes idiomas y regiones sin la necesidad de realizar cambios de ingeniería ni en el código. wiki

Que usar

i18next : es un framework de internalización escrito en y para JavaScript.
i18next-browser-languagedetector : Plugin que permite a i18next detectar el idioma del usuario en el navegador.

Instalación

npm install i18next --save
npm install -S i18next-browser-languagedetector

Configuración

Crear los archivos de idiomas en ./src/locales/es/translation.json y ./src/locales/en/translation.json.

// ./src/locales/es/translation.json
{
  "password": "Contraseña",
  "email": "Correo electronico",
  "access": "Ingresar",
  "signup": "¿No tienes cuenta?",
  "forgot": "¿olvidaste tu clave?"
}

// ./src/locales/en/translation.json
{
  "password": "password",
  "email": "email",
  "access": "Login ok",
  "signup": "You do not have an account?",
  "forgot": "Forgot your password?"
}

Definimos el archivo de configuración llamado i18n.js definido en la raiz de nuestro proyecto.

import i18n from "i18next"
import LanguageDetector from "i18next-browser-languagedetector"

// ruta a los archivos de idiomas
import common_en from "./src/locales/en/translation.json"
import common_es from "./src/locales/es/translation.json"

i18n.use(LanguageDetector).init({
  fallbackLng: "es",
  debug: true,
  interpolation: {
    escapeValue: false, // not needed for react!!
  },
  // react i18next special options (optional)
  react: {
    wait: false,
    bindI18n: "languageChanged loaded",
    bindStore: "added removed",
    nsMode: "default",
  },
  resources: {
    en: {
      translation: common_en,
    },
    es: {
      translation: common_es,
    },
  },
})
export default i18n

Ahora vamos a intregar i18n en nuestro primer componente.

{i18n.t('key')} donde key representa la llave del string que queremos reemplazar según el idioma que estemos aplicando.

import React, { Component } from 'react'

import i18n from '../../../i18n'

class Login extends Component {
  constructor() {
    ...
  }

  render() {
    return (
      <form onSubmit={this.sendForm}>
        <div className={styles.item}>
          <input
            type="text"
            name="email"
            placeholder={i18n.t('email')}
            onChange={this.handleChange}
          />
        </div>
        <div className={styles.item}>
          <input
            type="text"
            name="password"
            placeholder={i18n.t('password')}
            onChange={this.handleChange}
          />
        </div>
        <div className={styles.item}>
          <button type="submit">{i18n.t('access')}</button>
        </div>
        <div className={styles.item}>
          <Link to="/">{i18n.t('forgot')}</Link>
          <br />
          <Link to="/signup">{i18n.t('signup')}</Link>
        </div>
      </form>
    );
  }
}

export default Login;

Ahora para probarlo, puedes cambiar el lenguaje de tu navegador o simpplemente agregar a la url ?lng=TU_IDIOMA.

https://cristofer.dev/?lng=es