How to add i18n to your app

add-i18n.md

How to add i18n to your app

Follow the steps

• update your package.json:

  electrode-archetype-react-app: ^5.1.2
  electrode-archetype-react-app-dev: ^5.1.2
  

• Changes in src/client/app.jsx

  • Include the libraries on top

    import { I18nextProvider } from "react-i18next";
    import i18n from "electrode-archetype-react-app/i18next/index";
    

  • Inside window.webappStart render function, add <I18nextProvider i18n={ i18n }> as a wrapper of your content, for example:

    <I18nextProvider i18n={ i18n }>
      <Provider store={store}>
        <div>
          ...
        </div>       
      </Provider>
    </I18nextProvider>
    

• Changes in src/client/i18next folder:

  • add index.js and put content inside
  • add locales folder, and put the desired languages' json file there, as: en.json, zh.json etc. Add key & value pair.

• Changes in src/client, where existing texts are:

  • include libraries on top:

  import i18n from "../i18next/index";
  

  • update the text to: i18n.t("key-value"), for example, inside home.jsx:

  {i18n.t("title")}