{ "componentChunkName": "component---src-templates-doc-tsx", "path": "/docs/3.9.x/en/development/i18n/", "result": {"data":{"navigation":{"nodes":[{"section":"Getting started","entries":[{"frontmatter":{"title":"Installation","subtitle":"Installation of scm-manager","partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/installation/"}},{"frontmatter":{"title":"First Startup","subtitle":"Administration User Creation","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/first-startup/"}},{"frontmatter":{"title":"Migrate from v1 to v3","subtitle":"How to use the Migration-Wizard","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/migrate-scm-manager-from-v1/"}},{"frontmatter":{"title":"Migrate from v2 to v3","subtitle":"Changes in the configuration","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/migrate-scm-manager-from-v2/"}},{"frontmatter":{"title":"Import existing repositories","subtitle":"How to import existing repositories into SCM-Manager","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/import/"}},{"frontmatter":{"title":"Frequently Asked Questions","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/faq/"}},{"frontmatter":{"title":"Known Issues","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/known-issues/"}}]},{"section":"User-oriented","entries":[{"frontmatter":{"title":"Repository","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/repo/"}},{"frontmatter":{"title":"User","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/user/"}},{"frontmatter":{"title":"Groups","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/group/"}},{"frontmatter":{"title":"Administration","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/admin/"}},{"frontmatter":{"title":"Profile","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/profile/"}},{"frontmatter":{"title":"Notifications","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/notification/"}},{"frontmatter":{"title":"CLI Client","subtitle":null,"partiallyActive":true},"fields":{"slug":"/docs/3.9.x/en/user/cli/"}},{"frontmatter":{"title":"Shortcuts","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/user/shortcuts/"}}]},{"section":"Administration","entries":[{"frontmatter":{"title":"Base Directory","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/administration/basedirectory/"}},{"frontmatter":{"title":"Logging","subtitle":"Configuration and locations of SCM-Manager logging","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/administration/logging/"}},{"frontmatter":{"title":"SCM-Server Configuration","subtitle":"Various configuration options for the SCM-Server","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/administration/scm-server/"}},{"frontmatter":{"title":"Reverse Proxy","subtitle":"How to use SCM-Manager with common reverse proxies","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/administration/reverse-proxies/"}},{"frontmatter":{"title":"Caching for Working Directories","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/administration/workdir_caching/"}}]},{"section":"Development","entries":[{"frontmatter":{"title":"Intellij IDEA Configuration","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/intellij-idea-configuration/"}},{"frontmatter":{"title":"Building SCM-Manager from Source","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/build-from-source/"}},{"frontmatter":{"title":"Architecture overview","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/architecture-overview/"}},{"frontmatter":{"title":"Common pitfall occurred while developing the SCM V2","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/ui-common-pitfall/"}},{"frontmatter":{"title":"Permission Concept","subtitle":"Fine-grained permission for SCM-Manager v2","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/permission-concept/"}},{"frontmatter":{"title":"Decision Table","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/decision-table/"}},{"frontmatter":{"title":"Error Handling","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/error-handling/"}},{"frontmatter":{"title":"Styleguide","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/styleguide/"}},{"frontmatter":{"title":"Testing Guide","subtitle":"Howto write tests for SCM-Manager","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/testing-guide/"}},{"frontmatter":{"title":"Integration Tests","subtitle":"How to run integration tests","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/integration-tests/"}},{"frontmatter":{"title":"UI-Extensions","subtitle":"How to extend the SCM-Manager UI with plugins","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/ui-extensions/"}},{"frontmatter":{"title":"I18n","subtitle":"Howto do internationalization","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/i18n/"}},{"frontmatter":{"title":"Building Forms","subtitle":"Howto build forms for SCM-Manager","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/building-forms/"}},{"frontmatter":{"title":"Javadoc","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/javadoc/"}},{"frontmatter":{"title":"CLI Guidelines","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/cli-guideline/"}},{"frontmatter":{"title":"Definition of Done","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/definition-of-done/"}},{"frontmatter":{"title":"DOD for UI development","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/ui-dod/"}}]},{"section":"Plugin Development","entries":[{"frontmatter":{"title":"Create a plugin","subtitle":"Create a new SCM-Manager plugin","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/create/"}},{"frontmatter":{"title":"Migrate a v1 plugin","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/migrate-plugin-from-v1/"}},{"frontmatter":{"title":"Extension Points","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/extension-points/"}},{"frontmatter":{"title":"i18n for Plugins","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/i18n-for-plugins/"}},{"frontmatter":{"title":"Plugin Descriptor","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/plugin-descriptor/"}},{"frontmatter":{"title":"SCM-Manager v2 Plugin Development","subtitle":null,"partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/plugin-development/"}},{"frontmatter":{"title":"Publish","subtitle":"Publish your Plugin","partiallyActive":null},"fields":{"slug":"/docs/3.9.x/en/development/plugins/publish/"}}]}]},"versions":{"group":[{"fieldValue":"1.0.x"},{"fieldValue":"1.x"},{"fieldValue":"2.0.x"},{"fieldValue":"2.1.x"},{"fieldValue":"2.10.x"},{"fieldValue":"2.11.x"},{"fieldValue":"2.12.x"},{"fieldValue":"2.13.x"},{"fieldValue":"2.14.x"},{"fieldValue":"2.15.x"},{"fieldValue":"2.16.x"},{"fieldValue":"2.17.x"},{"fieldValue":"2.18.x"},{"fieldValue":"2.19.x"},{"fieldValue":"2.2.x"},{"fieldValue":"2.20.x"},{"fieldValue":"2.21.x"},{"fieldValue":"2.22.x"},{"fieldValue":"2.23.x"},{"fieldValue":"2.24.x"},{"fieldValue":"2.25.x"},{"fieldValue":"2.26.x"},{"fieldValue":"2.27.x"},{"fieldValue":"2.28.x"},{"fieldValue":"2.29.x"},{"fieldValue":"2.3.x"},{"fieldValue":"2.30.x"},{"fieldValue":"2.31.x"},{"fieldValue":"2.32.x"},{"fieldValue":"2.33.x"},{"fieldValue":"2.34.x"},{"fieldValue":"2.35.x"},{"fieldValue":"2.36.x"},{"fieldValue":"2.37.x"},{"fieldValue":"2.38.x"},{"fieldValue":"2.39.x"},{"fieldValue":"2.4.x"},{"fieldValue":"2.40.x"},{"fieldValue":"2.41.x"},{"fieldValue":"2.42.x"},{"fieldValue":"2.43.x"},{"fieldValue":"2.44.x"},{"fieldValue":"2.45.x"},{"fieldValue":"2.46.x"},{"fieldValue":"2.47.x"},{"fieldValue":"2.48.x"},{"fieldValue":"2.5.x"},{"fieldValue":"2.6.x"},{"fieldValue":"2.7.x"},{"fieldValue":"2.8.x"},{"fieldValue":"2.9.x"},{"fieldValue":"3.0.x"},{"fieldValue":"3.1.x"},{"fieldValue":"3.10.x"},{"fieldValue":"3.11.x"},{"fieldValue":"3.2.x"},{"fieldValue":"3.3.x"},{"fieldValue":"3.4.x"},{"fieldValue":"3.5.x"},{"fieldValue":"3.6.x"},{"fieldValue":"3.7.x"},{"fieldValue":"3.8.x"},{"fieldValue":"3.9.x"}]},"languages":{"group":[{"fieldValue":"de"},{"fieldValue":"en"}]},"markdownRemark":{"html":"

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

\n

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

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

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

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

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

\n

Function Component:

\n
import React from \"react\";\n// import hook from react-i18next library\nimport { useTranslation } from \"react-i18next\";\n\nconst Title = () => {\n  // use hook to obtain translate function for the namespace plugins\n  const { t } = useTranslation(\"plugins\");\n  // use translate function to translate key scm-sample-plugin.title\n  return <p>{t(\"scm-sample-plugin.title\")}</p>;\n};\n\nexport default Title;
\n

Class Component:

\n
import React from \"react\";\n// import higher order component and types for out Props\nimport { WithTranslation, withTranslation } from \"react-i18next\";\n\n// extend our props with WithTranslation\ntype Props = WithTranslation & {};\n\nclass Title extends React.Component<Props> {\n\n  render() {\n    // get translate function from props\n    const { t } = this.props;\n    // use translate function to translate key scm-sample-plugin.title\n    return <p>{t(\"scm-sample-plugin.title\")}</p>;\n  }\n\n};\n\n// wrap our component with withTranslation for the namespace plugins\nexport default withTranslation(\"plugins\")(Title);
\n

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

\n

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

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

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

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

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

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

We can also replace the placeholders with react components:

\n
import {DateFromNow} from \"@scm-manager/ui-components\";\n...\n<Trans \n  i18nKey=\"plugins:scm-sample-plugin.greetings\" \n  components={[\n    <p>\"Bob\"</p>, \n    <DateFromNow date={new Date()} />\n  ]} \n/>
","description":"SCM-Manager uses react-i18next for internationalization.\nThe keys for the translation are stored in json files called at ,\nfollowed by a folder for each…","tableOfContents":"","frontmatter":{"title":"I18n","subtitle":"Howto do internationalization","displayToc":false,"description":null,"keywords":null,"image":null}}},"pageContext":{"slug":"/docs/3.9.x/en/development/i18n/","version":"3.9.x","latestVersion":"3.11.x","latestPageVersion":"3.11.x","language":"en","relativePath":"/development/i18n/","canonicalPath":"/docs/latest/en/development/i18n/","latestRootPath":"/docs/3.11.x/en/"}}, "staticQueryHashes": ["1973669194","2742214048","2956773653","2957019495","698804963"]}