diff --git a/docs/contributing/i18n.md b/docs/contributing/i18n.md index f60a8684..24785d56 100644 --- a/docs/contributing/i18n.md +++ b/docs/contributing/i18n.md @@ -36,7 +36,7 @@ The `t()` function is the simplest form of translation, it accepts the text to b import { useTranslation } from 'react-i18next'; function MyComponent() { - const { t } = useTranslation('myNamespace'); + const { t } = useTranslation(); return

{t('Hello World')}

; } @@ -61,7 +61,7 @@ i18next will take care of proper pluralization rules in the currently active lan When translating text with simple HTML tags or other React components, you will need to use the [`` component](https://react.i18next.com/latest/trans-component). ```javascript -import { Trans, useTranslation } from 'react-i18next'; +import { Trans } from 'react-i18next'; function MyComponent() { return ( @@ -71,3 +71,24 @@ function MyComponent() { ); } ``` + +#### Interpolation with `` + +Handling placeholder variables and pluralization within the `` React component is handled slightly differently. For more details, please refer to [i18next-react's documentation](https://react.i18next.com/latest/trans-component#interpolation). + + +```javascript +import { Trans } from 'react-i18next'; + +function MyComponent() { + const person = { name: "Pedro" }; + // You can use an object literal within ! + return ( + + Your name is {{ name: person.name }}. + + ); + // This will result in the translation string: + // "Your name is {{name}}." +} +```