mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-03 20:15:52 +01:00
122 lines
2.6 KiB
Markdown
122 lines
2.6 KiB
Markdown
---
|
|
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()} />
|
|
]}
|
|
/>
|
|
```
|