i18n.md

Internationalization and localization

The software system supports internationalization and localization (i18n) out of the box. For example, classifications are already designed to handle localization.

Guide

The system uses static JSON-files to store translations which are stored in locales and can be used as the following:

import { ReactElement } from "react";

import { useTranslation } from "src/core/i18n";
import { useSnackbar } from "src/core/snackbar";

export function MonkeyComponent(): ReactElement {
  const { t } = useTranslation();
  const snackbar = useSnackbar();

  function handleClick(): void {
    snackbar.success(t("monkey.overview.update.success"));
  }

  return <span onClick={handleClick}>{t("monkey.overview.button.text")}</span>;
}

Guidelines for naming text keys

When naming keys for translations, follow a hierarchical structure using dot notation (e.g., "category.subcategory.key"). Be descriptive and specific, using lowercase letters and hyphens. Avoid numbers or special characters in keys. Consider context or variability in key names and separate translations for different languages into separate files or modules.

Plural

Plural translations are handled by using the count property in the translate function as done below.

import { ReactElement } from "react";

import { useTranslation } from "src/core/i18n";

export function MonkeyComponent(): ReactElement {
  const { t } = useTranslation();

  return <p>{t("monkey.overview.text", { count: 1 })}</p>;
}

The translations must be defined using a _one and _other prefix like so:

{
  "monkey": {
    "overview": {
      "text_one": "{{count}} monkey",
      "text_other": "{{count}} monkies"
    }
  }
}