... | ... | @@ -14,10 +14,10 @@ The `useTranslation` hook with its `t` function can be used inside most function |
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
|
export function MyComponent() {
|
|
|
**const { t, i18n } = useTranslation();
|
|
|
// or const [t, i18n] = useTranslation();**
|
|
|
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:
|
... | ... | @@ -38,9 +38,9 @@ In case react nodes should be integrated into a translated text, e.g. there is a |
|
|
const count = messages.length;
|
|
|
|
|
|
return (
|
|
|
**<Trans i18nKey="userMessagesUnread" count={count}>
|
|
|
<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>**
|
|
|
</Trans>
|
|
|
);
|
|
|
}
|
|
|
|
... | ... | |