This page does not refer to the most recent version of the SCM-Manager. Go to the latest version of this page.

I18n

Howto do internationalization

SCM-Manager uses react-i18next for internationalization. The keys for the translation are stored in json files called plugins.json at src/main/resources/locales/, followed by a folder for each language (e.g.: en for English, de for German). The keys should be prefixed with the name of the plugin to avoid collisions e.g.:

.../locales/en/plugins.json:

{
  "scm-sample-plugin": {
    "title": "Sample Title"
  }
}

.../locales/de/plugins.json:

{
  "scm-sample-plugin": {
    "title": "Beispiel Titel"
  }
}

The translations keys can now be used with in the frontend.

Function Component:

import React from "react";
// import hook from react-i18next library
import { useTranslation } from "react-i18next";

const Title = () => {
  // use hook to obtain translate function for the namespace plugins
  const { t } = useTranslation("plugins");
  // use translate function to translate key scm-sample-plugin.title
  return <p>{t("scm-sample-plugin.title")}</p>;
};

export default Title;

Class Component:

import React from "react";
// import higher order component and types for out Props
import { WithTranslation, withTranslation } from "react-i18next";

// extend our props with WithTranslation
type Props = WithTranslation & {};

class Title extends React.Component<Props> {

  render() {
    // get translate function from props
    const { t } = this.props;
    // use translate function to translate key scm-sample-plugin.title
    return <p>{t("scm-sample-plugin.title")}</p>;
  }

};

// wrap our component with withTranslation for the namespace plugins
export default withTranslation("plugins")(Title);

If it is required to replace values in the content the Trans component can be used. To achieve this goal we have to add placeholders to our translations e.g.:

.../locales/en/plugins.json:

{
  "scm-sample-plugin": {
    "title": "Sample Title",
    "greetings": "<0/> at <1/>"
  }
}

.../locales/de/plugins.json:

{
  "scm-sample-plugin": {
    "title": "Beispiel Titel",
    "greetings": "<0/> um <1/>"
  }
}

Now we can use the Trans component, not we have to specified the namespace with in the key:

<Trans 
  i18nKey="plugins:scm-sample-plugin.greetings" 
  values={["Bob", new Date().toString()]} 
/>

We can also replace the placeholders with react components:

import {DateFromNow} from "@scm-manager/ui-components";
...
<Trans 
  i18nKey="plugins:scm-sample-plugin.greetings" 
  components={[
    <p>"Bob"</p>, 
    <DateFromNow date={new Date()} />
  ]} 
/>