Traducciones con i18n

Traducciones con i18n

Es posible aplicar traducciones a las extensiones desarrolladas con ReactJs.

Para hacerlo, recomendamos el uso de i18n.

Cómo aplicar traducciones a una extensión

I18n nos facilita el proceso de traducción, acá detallamos el uso de la biblioteca.

El primer paso es instalarla, lo podemos hacer con un comando en la consola.

npm install i18next react-i18next

Componentes para traducir una extensión:

• Un archivo .json para cada idioma que vamos a incluir.
• Un archivo .js, en el cual importamos los .json y definimos un idioma por defecto.
• En los archivos .jsx de nuestro proyecto, importamos la biblioteca y accedemos a los valores de los archivos .json.

El archivo .json de cada idioma es un objeto que tiene pares clave-valor, donde el valor será el texto que mostraremos al usuario.

//es_AR.json
{
    "welcome": "Bienvenido!",
    "actions":{
        "field": "Seleccione un lote",
        "farm": "Seleccione un campo"
    }
}
//en_US.json
{
    "welcome": "Welcome!",
    "actions":{
        "field": "Select a field",
        "farm": "Select a farm"
    }
}

Una vez que tengamos estos archivos, dentro de nuestros archivos .jsx podremos acceder directamente a las traducciones.

//App.jsx
const App = () => {
  const { t, i18n } = useTranslation();
  useEffect(() => {
    i18n.changeLanguage(avt.generalData.getUserData().datos.locale);
  }, []);
  return (
    <div>
      <h1>{t("welcome")}</h1>
      <div>
        <button>{t("actions.field")}</button>
        <button>{t("actions.farm")}</button>
      </div>
    </div>
  );
};

De esta manera, el contenido que vemos, será dinámico. El lenguaje que tenga seleccionado el usuario dentro de la plataforma se verá también reflejado en la extensión.