... | ... | @@ -10,20 +10,22 @@ The `useTranslation` hook with its `t` function can be used inside most function |
|
|
|
|
|
**Example**:
|
|
|
|
|
|
import React from 'react';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
|
export function MyComponent() {
|
|
|
const { t, i18n } = useTranslation();
|
|
|
// or const [t, i18n] = useTranslation();
|
|
|
```jsx
|
|
|
import React from 'react';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
|
export function MyComponent() {
|
|
|
const { t, i18n } = useTranslation();
|
|
|
// or const [t, i18n] = useTranslation();
|
|
|
|
|
|
return <p>{t('my translated text')}</p>
|
|
|
}
|
|
|
return <p>{t('my translated text')}</p>
|
|
|
}
|
|
|
|
|
|
// Stored translation in the English translations JSON:
|
|
|
// "my translated text": "This is the text."
|
|
|
// In the German translations JSON:
|
|
|
// "my translated text": "Dies ist der Text."
|
|
|
// Stored translation in the English translations JSON:
|
|
|
// "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,20 +35,22 @@ In case react nodes should be integrated into a translated text, e.g. there is a |
|
|
|
|
|
**Example**:
|
|
|
|
|
|
function MyComponent({ person, messages }) {
|
|
|
const { name } = person;
|
|
|
const count = messages.length;
|
|
|
|
|
|
return (
|
|
|
<Trans i18nKey="userMessagesUnread" count={count}>
|
|
|
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
|
|
|
</Trans>
|
|
|
);
|
|
|
}
|
|
|
```jsx
|
|
|
function MyComponent({ person, messages }) {
|
|
|
const { name } = person;
|
|
|
const count = messages.length;
|
|
|
|
|
|
return (
|
|
|
<Trans i18nKey="userMessagesUnread" count={count}>
|
|
|
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
|
|
|
</Trans>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 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>."
|
|
|
// 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)
|
|
|
|
... | ... | |