diff --git a/docs/latest/SUMMARY.md b/docs/latest/SUMMARY.md index 7534de5f6..f9c2bb5e5 100644 --- a/docs/latest/SUMMARY.md +++ b/docs/latest/SUMMARY.md @@ -6,6 +6,7 @@ - [Data Source](essentials/data-source.md) - [Configuration](essentials/configuration.md) - [Themeing](essentials/themeing.md) + - [Translating](essentials/translating.md) - [Troubleshooting](essentials/troubleshooting.md) - [Scope of Project](essentials/scope-of-project.md) diff --git a/docs/latest/assets/img/ohif-i18n-extending-files-tree.png b/docs/latest/assets/img/ohif-i18n-extending-files-tree.png new file mode 100644 index 000000000..8bf3ff175 Binary files /dev/null and b/docs/latest/assets/img/ohif-i18n-extending-files-tree.png differ diff --git a/docs/latest/essentials/translating.md b/docs/latest/essentials/translating.md new file mode 100644 index 000000000..34d1b4432 --- /dev/null +++ b/docs/latest/essentials/translating.md @@ -0,0 +1,152 @@ +# Translating +OHIF supports internationalization using [i18next](https://www.i18next.com/) through the npm package [ohif-i18n](https://www.npmjs.com/package/ohif-i18n), where is the main instance of i18n containing several languages and tools. + +### Installing +```bash +yarn add ohif-i18n + +# OR + +npm install --save ohif-i18n +``` + +### How it works +After installing `ohif-i18n` npm package, the translation function [t](https://www.i18next.com/overview/api#t) can be used [with](#with-react) or [without](#without-react) React. + +A translation will occur every time a text match happens in a [t](https://www.i18next.com/overview/api#t) function. + +The [t](https://www.i18next.com/overview/api#t) function is responsible for getting translations using all the power of i18next. + +E.g. + +Before: +````html +
{t('my translated text')}
+} + +export default withTranslation('MyNameSpace')(MyComponent); +``` +> Important: if you are using React outside the OHIF Viewer, check the [I18nextProvider](#using-outside-of-ohif-viewer) section, `withTranslation` HOC doesnt works without a I18nextProvider + +##### Using Hooks +Also, it's possible to get the `t` tool using [React Hooks](https://react.i18next.com/latest/usetranslation-hook), but it requires at least React > 16.8. + + +#### Using outside of OHIF viewer +OHIF Viewer already sets a main [I18nextProvider](https://react.i18next.com/latest/i18nextprovider) connected to the shared i18n instance from `ohif-i18n`, +all extensions inside the Viewer will share this same provider at the end, you don't need a provider when developing a react Extension if you use `ohif-i18n`; + +But, if you need to use it completely outside of OHIF viewer, you can set the I18nextProvider this way: + +```js +import i18n, { I18nextProvider } from 'ohif-i18n'; +import App from './App'; + +
+
+All properties inside a Namespace (.json file) will be replaced in the new sub language, e.g en-US, en-UK, es-AR, es-MX, etc.
+
+
+#### - Extending languages dynamically
+
+Once you have access to the i18n instance, you can use the [addResourceBundle](https://www.i18next.com/how-to/add-or-load-translations#add-after-init) method to add and change language resources.
+
+E.g.
+```js
+import { i18n } from 'ohif-i18n';
+i18next.addResourceBundle('pt-BR', 'Buttons', {
+ 'Angle': 'Ângulo'
+});
+```
+------
+
+### How to set a whole new language
+To set a brand new language you can do it in two different ways:
+* Opening a pull request for `ohif-i18n` and sharing the translation with the community. Please see [Contributing](#contributing-with-new-languages) section for further information
+* Setting it only in your project or extension
+
+To set it apart of `ohif-i18n`, follow this snippet:
+
+File: myJsonFileWithLanguage.json // TODO - This example is a working in progress
+```json
+{
+ "prop1": "value1",
+ "prop2": "value2",
+ "prop3": "value3",
+ "prop4": "value4"
+}
+```
+
+```js
+import { extendLanguage } from 'ohif-i18n';
+import myJsonFileWithLanguage from './myJsonFileWithLanguage.json';
+
+extendLanguage(myJsonFileWithLanguage);
+// TODO - This example is a working in progress
+```
+
+### Contributing with new languages
+This project follows the
+[all-contributors](https://github.com/all-contributors/all-contributors)
+specification. Contributions of any kind are welcome!
+