SCM-Manager/docs/en/development/i18n.md

---
title: I18n
subtitle: Howto do internationalization
displayToc: false
---
SCM-Manager uses [react-i18next](https://react.i18next.com) 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`:

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

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

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

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

**Function Component**:

```tsx
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**:

```tsx
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`:

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

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

```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:

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

We can also replace the placeholders with react components:

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