Page Comparison

Internationalization (i18n) is the process of designing software applications to be adapted easily for different languages and regions without requiring significant engineering changes. The goal of internationalization is to make the application locale-aware, meaning that it can be easily adapted to different locales or regions without requiring any changes to the codebase. We

In OpenMRS v3, we use react-i18next(opens in a new tab) to internationalize frontend module content.

In order to internationalize your frontend module, add this line in the index.ts file to tell the app shell where to find the translation files.

...

Here is an example of using react-i18next localization in your react components., specifically using react-18next’s t function:

import { useTranslation } from "react-i18next";
 
const ActiveVisitsTable = () => {
  const { t } = useTranslation();
 
  return <h4>{t("activeVisits", "Active Visits")}</h4>;
};

The framework provides a set of core translations that are used in many frontend modules. These can be used with the getCoreTranslation(opens in a new tab) function. This function takes two arguments: the first is the key of the core translation, and the second is the default value to return if the requested translation is not found. A Typescript type error is shown if the provided key is not valid.

The valid core translations are defined in the CoreTranslationKey(opens in a new tab) type. These include common strings used in many apps, such as Cancel, Confirm, Female, and Other. The corresponding translation JSON files themselves live in the esm-translations(opens in a new tab) app.

import { getCoreTranslation } from "@openmrs/esm-framework";
 
const ErrorHeader = () => {
  return <h4>{getCoreTranslation("error", "Error")}</h4>;
};

For more about translation, see: How to Translate OpenMRS.