|
1 | 1 | # Multiple Translation Files |
2 | 2 |
|
3 | | -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: |
| 3 | +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: |
4 | 4 |
|
5 | 5 | So while this takes the translation from the defined default namespace: |
6 | 6 |
|
7 | 7 | ```javascript |
8 | 8 | i18next.t('look.deep'); |
9 | 9 | ``` |
10 | 10 |
|
11 | | -This will lookup the key in a namespace \(file\) called common.json: |
| 11 | +This will lookup the key in a namespace (file) called common.json: |
12 | 12 |
|
13 | 13 | ```javascript |
14 | | -i18next.t('common:look.deep'); |
| 14 | +i18next.t('common:look.deep'); |
| 15 | +// better use the ns option: |
| 16 | +i18next.t('look.deep', { ns: 'common' }) |
15 | 17 | ``` |
16 | 18 |
|
17 | 19 | 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 |
42 | 44 |
|
43 | 45 | With react-i18next you can use any of the components passing down the `t` function to your components to load namespaces: |
44 | 46 |
|
45 | | -* [useTranslation \(hook\)](../latest/usetranslation-hook.md) |
46 | | -* [withTranslation \(HOC\)](../latest/withtranslation-hoc.md) |
47 | | -* [Translation \(render prop\)](../latest/translation-render-prop.md) |
| 47 | +* [useTranslation (hook)](../latest/usetranslation-hook.md) |
| 48 | +* [withTranslation (HOC)](../latest/withtranslation-hoc.md) |
| 49 | +* [Translation (render prop)](../latest/translation-render-prop.md) |
48 | 50 |
|
49 | 51 | All take arguments to define which namespaces to load and will Suspense rendering until those got loaded. |
50 | 52 |
|
51 | | -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\). |
| 53 | +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). |
52 | 54 |
|
53 | 55 | ## Manage your translations with a management GUI |
54 | 56 |
|
55 | | -### \*\*\*\*[**locize**](https://locize.com) is the perfect translation management tool for your [**i18next**](https://www.i18next.com) project |
| 57 | +### ****[**locize**](https://locize.com) is the perfect translation management tool for your [**i18next**](https://www.i18next.com) project |
56 | 58 |
|
57 | | -#### ➡️ [i18next](https://www.i18next.com/) + [locize](https://locize.com/) = [true continuous localization](https://locize.com/how-it-works.html#continouslocalization) |
| 59 | +#### ➡️ [i18next](https://www.i18next.com) + [locize](https://locize.com) = [true continuous localization](https://locize.com/how-it-works.html#continouslocalization) |
58 | 60 |
|
59 | | -[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. |
60 | | -See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo). |
61 | | -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)\). |
| 61 | +[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.\ |
| 62 | +See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo).\ |
| 63 | +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)). |
62 | 64 |
|
63 | 65 | {% embed url="https://youtu.be/osScyaGMVqo" %} |
64 | 66 |
|
65 | 67 | {% embed url="https://youtu.be/VfxBpSXarlU" %} |
66 | 68 |
|
67 | | - |
68 | | - |
0 commit comments