GitBook: No commit message

Author: jamuhl

.gitbook/assets/Screen Shot 2018-07-30 at 10.25.19.png

@@ -12,14 +12,14 @@ The module provides multiple components eg. to assert that needed translations g
 
 react-i18next is optimally suited for **server-side rendering**. It provides extra extension point to work with next.js, for e.g. [Learn more](legacy-v9/serverside-rendering.md).
 
-As react-i18next depends on [i18next](http://i18next.com) you can use it in any other UI framework and on the server-side \(node.js, .net, ...\) too. Like the React philosophy - just:
+As react-i18next depends on [i18next](http://i18next.com) you can use it in any other UI framework and on the server-side (node.js, .net, ...) too. Like the React philosophy - just:
 
 > **Learn once - translate everywhere**.
 
 {% hint style="success" %}
-[Here](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb) you'll find a simple tutorial on how to best use react-i18next.  
-Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[  
- ![](.gitbook/assets/title-width.jpg)](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)
+[Here](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb) you'll find a simple tutorial on how to best use react-i18next.\
+Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[\
+ ![](<.gitbook/assets/title width.jpg>)](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)
 {% endhint %}
 
 ## What does my code look like
@@ -50,15 +50,14 @@ If you prefer not using semantic keys but text - [that's also possible](https://
 
 ## On top: [Localization as a service](https://locize.com)
 
-i18next supports translation management tools such as [locize.com](http://locize.com/?utm_source=react_i18next_com&utm_medium=gitbook).
+i18next supports translation management tools such as [locize.com](http://locize.com).
 
 {% hint style="success" %}
-[Here](https://github.com/locize/react-tutorial) you can find a step by step guide, which will unleash the full power of i18next in combination with locize.  
-See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo).  
-There's also the possibility to have an [even more focused developer experience](https://youtu.be/VfxBpSXarlU), with the help of the [auto-machinetranslation workflow](https://docs.locize.com/whats-inside/auto-machine-translation) and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also [automatically translated](https://youtu.be/VfxBpSXarlU) into the target languages using machine translation \(like [Google Translate](https://cloud.google.com/translate)\).
+[Here](https://github.com/locize/react-tutorial) you can find a step by step guide, which will unleash the full power of i18next in combination with locize.\
+See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo).\
+There's also the possibility to have an [even more focused developer experience](https://youtu.be/VfxBpSXarlU), with the help of the [auto-machinetranslation workflow](https://docs.locize.com/whats-inside/auto-machine-translation) and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also [automatically translated](https://youtu.be/VfxBpSXarlU) into the target languages using machine translation (like [Google Translate](https://cloud.google.com/translate)).
 {% endhint %}
 
 ![](.gitbook/assets/general-locize-screen.png)
 
 [Learn more about the enterprise offering](https://www.i18next.com/for-enterprises.html)
-

.gitbook/assets/Screen Shot 2018-09-30 at 16.58.18.png

@@ -56,7 +56,7 @@ You will get the t function by using the [useTranslation](latest/usetranslation-
 
 ### JSX tree
 
-Sometimes you might want to include html formatting or components like links into your translations. \(Always try to get the best result for your translators - the final string to translate should be a complete sentence\).
+Sometimes you might want to include html formatting or components like links into your translations. (Always try to get the best result for your translators - the final string to translate should be a complete sentence).
 
 **Before:** Your react code would have looked something like:
 
@@ -124,7 +124,7 @@ ReactDOM.render(
 
 #### RESULT:
 
-![Preview of content](.gitbook/assets/screen-shot-2018-09-30-at-16.58.18.png)
+![Preview of content](<.gitbook/assets/Screen Shot 2018-09-30 at 16.58.18.png>)
 
 {% hint style="info" %}
 This sample while very simple does come with some [drawbacks](guides/the-drawbacks-of-other-i18n-solutions.md) to getting the full potential from using react-i18next you should read the extended [step by step guide](latest/using-with-hooks.md).
@@ -133,8 +133,7 @@ This sample while very simple does come with some [drawbacks](guides/the-drawbac
 ### Do you like to read a more complete step by step tutorial?
 
 {% hint style="success" %}
-[Here](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb) you'll find a simple tutorial on how to best use react-i18next.  
-Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[  
- ![](.gitbook/assets/title-width.jpg)](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)
+[Here](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb) you'll find a simple tutorial on how to best use react-i18next.\
+Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[\
+ ![](<.gitbook/assets/title width.jpg>)](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)
 {% endhint %}
-

.gitbook/assets/title width.jpg

@@ -1,17 +1,19 @@
 # Multiple Translation Files
 
-One of the advantages of react-i18next is based on i18next it supports the separation of translations into multiple files - which are called namespaces in i18next context -> as you're accessing keys from a namespace defining that as a prefix:
+One of the advantages of react-i18next is based on i18next it supports the separation of translations into multiple files - which are called namespaces in i18next context -> as you're accessing keys from a namespace defining that as a prefix:
 
 So while this takes the translation from the defined default namespace:
 
 ```javascript
 i18next.t('look.deep');
 ```
 
-This will lookup the key in a namespace \(file\) called common.json:
+This will lookup the key in a namespace (file) called common.json:
 
 ```javascript
-i18next.t('common:look.deep');
+i18next.t('common:look.deep'); 
+// better use the ns option:
+i18next.t('look.deep', { ns: 'common' })
 ```
 
 In order to use multiple namespaces/translation files, you need to specify it when calling [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) :
@@ -42,27 +44,25 @@ In i18next you got a lot of options to add translations on init, in your code ca
 
 With react-i18next you can use any of the components passing down the `t` function to your components to load namespaces:
 
-* [useTranslation \(hook\)](../latest/usetranslation-hook.md)
-* [withTranslation \(HOC\)](../latest/withtranslation-hoc.md)
-* [Translation \(render prop\)](../latest/translation-render-prop.md)
+* [useTranslation (hook)](../latest/usetranslation-hook.md)
+* [withTranslation (HOC)](../latest/withtranslation-hoc.md)
+* [Translation (render prop)](../latest/translation-render-prop.md)
 
 All take arguments to define which namespaces to load and will Suspense rendering until those got loaded.
 
-So you do not need to load all translations upfront enabling you to create huge react based applications without slowing down loading of the first page cause all translations need to be loaded upfront \(hello other i18n implementations\).
+So you do not need to load all translations upfront enabling you to create huge react based applications without slowing down loading of the first page cause all translations need to be loaded upfront (hello other i18n implementations).
 
 ## Manage your translations with a management GUI
 
-### \*\*\*\*[**locize**](https://locize.com) is the perfect translation management tool for your [**i18next**](https://www.i18next.com) project
+### ****[**locize**](https://locize.com) is the perfect translation management tool for your [**i18next**](https://www.i18next.com) project
 
-#### ➡️ [i18next](https://www.i18next.com/) + [locize](https://locize.com/) = [true continuous localization](https://locize.com/how-it-works.html#continouslocalization)
+#### ➡️ [i18next](https://www.i18next.com) + [locize](https://locize.com) = [true continuous localization](https://locize.com/how-it-works.html#continouslocalization)
 
-[Here](https://github.com/locize/react-tutorial) you can find a step by step guide, which will unleash the full power of i18next in combination with locize.  
-See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo).  
-There's also the possibility to have an [even more focused developer experience](https://youtu.be/VfxBpSXarlU), with the help of the [auto-machinetranslation workflow](https://docs.locize.com/whats-inside/auto-machine-translation) and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also [automatically translated](https://youtu.be/VfxBpSXarlU) into the target languages using machine translation \(like [Google Translate](https://cloud.google.com/translate)\).
+[Here](https://github.com/locize/react-tutorial) you can find a step by step guide, which will unleash the full power of i18next in combination with locize.\
+See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo).\
+There's also the possibility to have an [even more focused developer experience](https://youtu.be/VfxBpSXarlU), with the help of the [auto-machinetranslation workflow](https://docs.locize.com/whats-inside/auto-machine-translation) and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also [automatically translated](https://youtu.be/VfxBpSXarlU) into the target languages using machine translation (like [Google Translate](https://cloud.google.com/translate)).
 
 {% embed url="https://youtu.be/osScyaGMVqo" %}
 
 {% embed url="https://youtu.be/VfxBpSXarlU" %}
 
-
-

README.md

@@ -19,9 +19,9 @@ Check out this basic [react example](https://github.com/i18next/react-i18next/tr
 #### Do you like to read a more complete step by step tutorial?
 
 {% hint style="success" %}
-[Here](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb) you'll find a simple tutorial on how to best use react-i18next.  
-Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[  
- ![](../.gitbook/assets/title-width.jpg)](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)
+[Here](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb) you'll find a simple tutorial on how to best use react-i18next.\
+Some basics of i18next and some cool possibilities on how to optimize your localization workflow.[\
+![](<../.gitbook/assets/title width.jpg>)](https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb)
 {% endhint %}
 
 ## Configure i18next
@@ -179,6 +179,5 @@ Prefer having code to checkout? Directly dive into our examples:
 
 > **Would you like to visually check the progress state of your translations?**
 >
-> _Try_ [_translation-check_](https://github.com/locize/translation-check)_, it shows an overview of your translations in a nice UI. Check which keys are not yet translated._  
+> _Try_ [_translation-check_](https://github.com/locize/translation-check)_, it shows an overview of your translations in a nice UI. Check which keys are not yet translated._\
 > [![](../.gitbook/assets/preview.jpg) ](https://github.com/locize/translation-check)
-

getting-started.md

@@ -97,9 +97,8 @@ Let's take following content:
 
 In most frameworks you will end having to split this into multiple translation strings. But for your translators it would make sense to have this as one sentence to translate like eg.:
 
-```text
+```
 Hello <1>{name}</1>, you have <3>{count} unread message(s)</3>.
 ```
 
 You can do this using the [Trans component](../latest/trans-component.md).
-

guides/multiple-translation-files.md

@@ -43,14 +43,13 @@ export default i18n;
 
 All additional options for react in init options:
 
-| options | default | description |
-| :--- | :--- | :--- |
-| bindI18n | 'languageChanged' | which events trigger a rerender, can be set to false or string of events   separated by "" |
-| bindI18nStore | '' | define which events on [resourceStore](https://www.i18next.com/overview/api#store-events) should trigger a rerender |
-| transEmptyNodeValue | '' | how to treat failed lookups in Trans component |
-| transSupportBasicHtmlNodes | true | convert eg. `<br/>` found in translations to a react component of type br   [See Trans component](trans-component.md#using-for-simple-html-elements-in-translations-v-10-4-0) |
-| transKeepBasicHtmlNodesFor | \['br', 'strong', 'i', 'p'\] | Which nodes not to convert in defaultValue generation in the Trans component.   [See Trans component](trans-component.md#using-for-simple-html-elements-in-translations-v-10-4-0) |
-| useSuspense | true | If using Suspense or not |
+| options                    | default                     | description                                                                                                                                                                                                        |
+| -------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| bindI18n                   | 'languageChanged'           | <p>which events trigger a rerender, can be set to false or string of events <br> separated by ""</p>                                                                                                               |
+| bindI18nStore              | ''                          | define which events on [resourceStore](https://www.i18next.com/overview/api#store-events) should trigger a rerender                                                                                                |
+| transEmptyNodeValue        | ''                          | how to treat failed lookups in Trans component                                                                                                                                                                     |
+| transSupportBasicHtmlNodes | true                        | <p>convert eg. <code>&#x3C;br/></code> found in translations to a react component of type br <br> <a href="trans-component.md#using-for-simple-html-elements-in-translations-v-10-4-0">See Trans component</a></p> |
+| transKeepBasicHtmlNodesFor | \['br', 'strong', 'i', 'p'] | <p>Which nodes not to convert in defaultValue generation in the Trans component. <br> <a href="trans-component.md#using-for-simple-html-elements-in-translations-v-10-4-0">See Trans component</a></p>             |
+| useSuspense                | true                        | If using Suspense or not                                                                                                                                                                                           |
 
 For more initialization options have look at the [docs](https://www.i18next.com/configuration-options.html).
-

guides/quick-start.md

@@ -16,11 +16,10 @@ import App from './App';
 
 ## When to use?
 
-You will only need to use the provider in scenarios for SSR \(ServerSideRendering\) or if you need to support multiple i18next instances - eg. if you provide a component library. 
+You will only need to use the provider in scenarios for SSR (ServerSideRendering) or if you need to support multiple i18next instances - eg. if you provide a component library. 
 
 ## I18nextProvider props
 
-| _**name**_ | **type \(**_**default\)**_ | _**description**_ |
-| :--- | :--- | :--- |
-| **i18n** | object \(undefined\) | pass i18next instance the provider will pass it down to translation components by context |
-
+| _**name**_ | **type (**_**default)**_ | _**description**_                                                                         |
+| ---------- | ------------------------ | ----------------------------------------------------------------------------------------- |
+| **i18n**   | object (undefined)       | pass i18next instance the provider will pass it down to translation components by context |