React-i18next: Trans component documentation - add a few full samples

[jamuhl]

https://github.com/i18next/react-i18next/issues/443#issuecomment-392769327

[arkross]

Personally, I was confused on how do the "index tag" (e.g. <0>, <1>) corresponds to which part of the Trans component's children. So I made a note specifically about this. Here are some examples I made by experimenting:

Assuming we ignore the title attribute in <strong> tag and the value of count, we focus only on the content of the <strong> tag.

Example 1: Single children, multiple properties in a node

<Trans i18nKey='userMessagesUnread' count={count}>
    <Hello <strong title={t('nameTitle')}>{{name: 'Jan', title='Mr.'}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

"userMessagesUnread": "Hello <1><0>{{title}} {{name}}</0></1>, you have <3>{{count}}</3> unread message. <5>Go to message</5>."

Example 2: Multiple children in a node

<Trans i18nKey='userMessagesUnread' count={count}>
    Hello <strong title={t('nameTitle')}>{{name: 'Jan'}}{{title: 'Mr.'}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

"userMessagesUnread": "Hello <1><1>{{title}}</1> <0>{{name}}</0></1>, you have <3>{{count}}</3> unread message. <5>Go to message</5>."

Example 3: No unusable text nodes

<Trans i18nKey='userMessagesUnread' count={count}>
    <strong title={t('nameTitle')}>{{name='Jan', title: 'Mr.'}}</strong>{{count}}<Link to="/msgs">third node</Link>
</Trans>

"userMessagesUnread": "Hello <0><0>{{title}} {{name}}</0></0>, you have <1>{{count}}</1> unread message. <2>Go to message</2>."

All examples will render the same output

Hello <strong title='Jan'>Mr. Jan</strong>, you have 1 unread message. <Link to="/msgs">Go to messages</Link>

---

Feel free to audit if there's any mistake.

[jamuhl]

@arkross really awesome...would you mind me copy https://github.com/arkross/arkross.github.io/wiki/Using-react-i18next-Trans-Component and adding it to https://react.i18next.com ?!? Will also add a reference to your original content...

[arkross]

You're welcome!

Please be aware that there might be some misused terms or broken English which can lead to more confusion. Any audit before actually being copied in the official documentation would be appreciated.

[jamuhl]

@arkross awesome...will integrate it in a few hours...ha...guess my english more broken than yours ;) as swiss german i can't even write correct german ;) - so i will have a look - and add my own wrong spelling corrections to it

thanks again...guess that will help others a lot.

[AStaege]

is there any practical usage for that "values" attrib in the trans component? thought of it as being for injecting values into the trans children context.
if any usage, could you also give an example for that?

[jamuhl]

Those are used if using ICU -> also the ICU macro converts the inner content to append values and components props: https://react.i18next.com/misc/using-with-icu-format#using-the-trans-component