Skip to main content

How to add i18n translation

Adding i18n text and translations is relatively easy. The general work flow is:

  • Add English text to your component
  • Regenerate translation files
  • Add translations

Adding text to your component​

In Re:Earth we use the Text component for all our text, so inside that component we will add the English first like so:

warning

The variable name must be t. Otherwise, the translation will not be detected by i18next-parser introduced below.

import { useT } from "@react/i18n"

// ...
// inside React component
const t = useT();

return (
    <Text size="s">
        {t("We like maps")}
    </Text>
);

Regenerate translation files​

After you are finished adding your text in English within your component, you will need to regenerate the i18n translation files. Do so with the command (i18next-parser will be executed):

yarn i18n

Don't worry, the translations you have already written will be retained even if you regenerate the translation files!

Add translations​

At this point the files located inside src/i18n/translations directory will have been updated. A string value specified in the argument of the t function is used as keys.

'We like maps':

Locate your new text inside the en.yml file and with its key locate the corresponding key in the ja.yml file. Input the translations and you are good to go!

info

When a translation is empty, its key will be displayed in an UI.