Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
143 lines (106 sloc) 5.7 KB

Trans Component

Important note

While the Trans components gives you a lot of power by letting you interpolate or translate complex react elements - the truth is - in most cases you won't need it.

As long you have no react nodes you like to be integrated into a translated text (text formatting, like strong, i, ...) or adding some link component - you won't need it - most can be done by using the good old t function.

{% hint style="info" %} Using the t function have a look at i18next documentation:

Sample

So you learned there is no need to use the Trans component everywhere (the plain t function will just do fine in most cases).

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

Let's 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 en.json (translation strings) will look like:

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

{% hint style="info" %} saveMissing will send a valid defaultValue {% endhint %}

Alternative usage

Depending on using ICU as translation format it is not possible to have the needed syntax as children (invalid jsx). You can alternatively use the component like:

<Trans
  defaults="hello <0>{{what}}</0>"
  values={{ what: 'world'}}
  components={[<strong>univers</strong>]}
/>

How to get the correct translation string?

Guessing replacement tags (<0></0>) of your component right is rather difficult. There are two options to get those translations directly generated by i18next.

  1. use debug = true in i18next init call and watch your console for the missing key output
  2. use the saveMissing feature of i18next to get those translations pushed to your backend or handled by a custom missing key handler.
  3. 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>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>."

based on the node tree**:**

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

{% hint style="info" %} Rules:

  • child is a string => nothing to wrap just take the string
  • child is an object => nothing to to it's used for interpolation
  • child is an element: wrap it's children in <i></i> where i is the index of that element position in children and handle it's children with same rules (starting element.children index at 0 again) {% endhint %}

Trans props

name type (default) description
i18nKey string (undefined) is optional if you prefer to use text as keys you can omit that and the translation will be used as a key.
t function (undefined) t function to use instead of i18next.t
count integer (undefined) optional count if you use a plural
parent node (undefined) a component to wrap the content into (default none, can be globally set on i18next.init) -> needed for react < v16
i18n object (undefined) i18next instance to use if not provided
defaults string (undefined) use this instead of default content in children (useful when using ICU)
values object (undefined) interpolation values if not provided in children
components array[nodes] (undefined) components to interpolate based on index of tag <0></0>, ...

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
  }
});

{% hint style="warning" %} Please be aware if you are using React 15 or below, you need to set the defaultTransParent or parent in props. {% endhint %}