Trans component

This component enables you to nest any react content to be translated as one string. Supports both plural and interpolation.

Lets say you want to create following html output:

Hello Arthur, you have 42 unread messages. Go to messages.

Before: Your react code would have looked something like:

<div>
    Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>

After: With the trans component just change it to:

<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>

Your json will look like:

en:

"userMessagesUnread": "Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> unread message. <5>Go to message</5>.",
"userMessagesUnread_plural": "Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> unread messages.  <5>Go to messages</5>.",
  • saveMissing will send a valid defaultValue

For a working sample have a look here.

how to get the correct translation strings

Guessing replacement tags (<1>) of your components right is too much effort. There are two options to get those translations directly generated by i18next.

a) use debug = true in i18next init call and watch your console for the missing key output

b) use the saveMissing feature of i18next to get those translations pushed to your backend or handled by a custom missing key handler.

c) understand how those numbers get generated from child index:

jsx:

...
<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>
...

results in string:

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

based on:

Pseudo code for the Trans component children:

Trans.children = [
  'Hello ',
  { children: [{ name: 'Jan'  }] }, // index 1 -> child object index 0
  ', you have',
  { count: 10 }, // index 3
  ' unread messages. ',
  { children: [ 'Go to messages' ] }, // index 5 -> just a string child
  '.'
]

props

  • i18nKey: is optional if you prefer to use text as keys you can omit that and the translation will be used as key.
  • count: optional count if you use a plural
  • parent: a component to wrap the content into (default none, can be globally set on i18next.init)
  • i18n: i18next instance to use if not provided via context (using hoc or render props)
  • t: t function to use if not provided via context (using hoc or render props)

additional options on i18next.init

i18next.init({
  // ...
  react: {
    // ...
    hashTransKey: function(defaultValue) {
      // return a key based on defaultValue or if you prefer to just remind you should set a key return false and throw an error
    },
    defaultTransParent: 'div' // a valid react element - required before react 16
  }
});

Please note that if you are running React 15 or below, you need to set defaultTransParent.

results matching ""

    No results matching ""