Trans Component (v9)
Important note
While the Trans components gives you a lot of power by letting you interpolate or translate complexer 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.
All can be done by using the t
function you get by the translate hoc or I18n render prop.
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:
After: With the trans component just change it to:
Your en.json (translation strings) will look like:
saveMissing will send a valid defaultValue
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:
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.
use
debug = true
in i18next init call and watch your console for the missing key outputuse the saveMissing feature of i18next to get those translations pushed to your backend or handled by a custom missing key handler.
understand how those numbers get generated from child index:
jsx:
results in string:
based on the node tree**:**
Rules:
child is a string => nothing to wrap just take the string
child is an object => nothing to do 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)
Trans props
Additional options on i18next.init
Please be aware if you are using React 15 or below, you need to set the defaultTransParent
or parent
in props.
Last updated