i18n for Plugins

How to internationalize your own plugin

Create the plugins.json file

The translation file for plugins should be stored in the resources path locales/{lang}/plugins.json

All translation keys are parts of a unique root key. It is recommended to use the maven artifactId of the plugin as root key to avoid conflicts with other plugin. All translation files would be collected and merged to a single file containing all translations. Therefore it is necessary to use a unique root key for the translations.

Example:

the translation file of the svn plugin is stored in locales/en/plugins.json

{
 "scm-svn-plugin": {
   "information": {
     "checkout" : "Checkout repository"
   }
 }
}

Usage in the own React components

SCM-Manager use react-i18next to render translations.

Functional components

The following steps are needed to use react-i18next in the own functional components:

  • import react-i18next

    import { useTranslation } from "react-i18next";
  • use the translation keys like this:

    const [t] = useTranslation("plugins");
    ...
    <h3>{t("scm-svn-plugin.information.checkout")}</h3>

Class components

The following steps are needed to use react-i18next in the own class components:

  • import react-i18next

    import { WithTranslation, withTranslation } from "react-i18next";
  • declare the translation method t: string => string as property

    type Props = WithTranslation & {
    ***your props***
    }
  • wrap the react component with the translate method and give the json translation file name "plugins"

    export default withTranslation("plugins")(MyPluginComponent);
  • use the translation keys like this:

    const { t } = this.props;
    <h3>{t("scm-svn-plugin.information.checkout")}</h3>