Skip to main content

Localization

i18next is used for localization in the frontend. All locales can be found under the frontend/public/locales directory in the four-character ISO locale code.

Translations are referred to by their keys, so you can use them as such:

import {useTranslation} from "react-i18next";

const MyComponent = () => {
  const {t} = useTranslation();

  return <p>{t("module.uiComponent.category.key")}</p>;
}

Keys are extracted via the bun run i18n:extract command manually, or during GHA. How this works is configured inside the i18next-parser.config.ts file.

You can use various third-party providers for managing your localized strings online. This can be useful if you are in a team and do not wish the developers to be responsible for managing translation texts. Some options listed below:

You can even see an example of the Github actions CI/CD in the CI/CD section.

Translation key guidelines​

We used the following translation key guidelines

  • Translation keys should follow the format of module.uiComponent.category.key, e.g. inside the auth module, the LoginForm component which has an error shows the key auth.loginForm.errors.invalidEmail
  • English, camelCase, singular form
  • Additional nested can be permitted if needed
  • Rarely, common keys should be used in the form shared.category.key
  • Categories should be singular