... | ... | @@ -10,6 +10,7 @@ The `useTranslation` hook with its `t` function can be used inside most function |
|
|
|
|
|
**Example**:
|
|
|
|
|
|
```jsx
|
|
|
import React from 'react';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
... | ... | @@ -24,6 +25,7 @@ The `useTranslation` hook with its `t` function can be used inside most function |
|
|
// "my translated text": "This is the text."
|
|
|
// In the German translations JSON:
|
|
|
// "my translated text": "Dies ist der Text."
|
|
|
```
|
|
|
|
|
|
**Documentation**: [https://react.i18next.com/latest/usetranslation-hook](https://react.i18next.com/latest/usetranslation-hook)
|
|
|
|
... | ... | @@ -33,6 +35,7 @@ In case react nodes should be integrated into a translated text, e.g. there is a |
|
|
|
|
|
**Example**:
|
|
|
|
|
|
```jsx
|
|
|
function MyComponent({ person, messages }) {
|
|
|
const { name } = person;
|
|
|
const count = messages.length;
|
... | ... | @@ -47,6 +50,7 @@ In case react nodes should be integrated into a translated text, e.g. there is a |
|
|
// Stored translation:
|
|
|
// "userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
|
|
|
// "userMessagesUnread_plural": "Hello <1>{{name}}</1>, you have {{count}} unread messages. <5>Go to messages</5>."
|
|
|
```
|
|
|
|
|
|
The numbers in the translation string refer to the specific node's index inside the node tree (see documentation)
|
|
|
|
... | ... | |