I18n Translations

I18n Translations

It is possible to translate ReactJs Extensions.

In order to do it, we recommend i18n.

How to translate an Auravant Extension

I18n makes it easier to translate our applications.

The first step is to install the library, we can do it from the console.

npm install i18next react-i18next

Components to translate an Extension:

• A .json file for each language we want to include.
• A .js, en el cual importamos los .json y definimos un idioma por defecto.
• In our .jsx files, we import the library and access values from .json files.

This .json files are key-value objects, where the value contains the text shown to the user.

//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"
    }
}

Once we have this .json settled, we can access the translations objects from our project .jsx files.

//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>
  );
};

This way, the content we see is dynamic. The platform language selected by the user will be also reflected in the extension.