<Trans>
gives you a lot of power by letting you interpolate or translate complex React elements, the truth is: in most cases you don't even need it.strong
, em
, link components, maybe others), you won't need it - most of the times you will be using the good old t
function.useTranslation
hook or withTranslation
HOC for those cases.t
function will just do fine in most cases).defaultValue
based on the component children.
Also, The i18nKey
is optional, in case you already use text as translation keys.transSupportBasicHtmlNodes
, see the next section.link: <Link />
, img: <img src="" />
, media: <img src="" />
className
), having none or a single text children.<br/>
<strong>bold</strong>
<p>some paragraph</p>
<i className="icon-gear" />
: no attributes allowed<strong title="something">{{name}}</strong>
: only text nodes allowed<b>bold <i>italic</i></b>
: no nested elements, even simple onesi18next.options.react
that affect this behaviour:transSupportBasicHtmlNodes
true
<br/>
) in translations instead of indexed keystransKeepBasicHtmlNodesFor
['br', 'strong', 'i', 'p']
defaultValue
generation of <Trans>
.transWrapTextNodes
(v11.10.0)''
span
. By default, text nodes are not wrapped. Can be used to work around a well-known Google Translate issue with React apps. See facebook/react#11538.count
prop:Array.map()
to turn dynamic content into nodes, using an extra option on a wrapping element:i18nIsDynamicList
on the parent element will assert the nodeToString
function creating the string for saveMissing
will not contain children.<0>
-> 0 is the index of the component in the components array<Trans>
component instance and look at the props.children
array for array index of the tag in question.debug = true
in i18next.init()
options and watch your console for the missing key output<x></x>
where x
is the index of that element's position in the children
list; handle its children with the same rules (starting element.children
index at 0 again)i18nKey
if you're not using natural language keys (text-based).i18nKey
string (undefined)
'ns:key'
(depending on i18next.options.nsSeparator
)<Trans i18nKey="myKey" ns="myNS"></Trans>
ns
string (undefined)
i18nKey
but not recommended when used in combination with natural language keys, see above.t
function (undefined)
t
function to use instead of i18next.t()
count
integer (undefined)
tOptions
object (undefined)
t()
(e.g. context
, postProcessor
, ...)parent
node (undefined)
i18next.init
). Required for React < v16i18n
object (undefined)
defaults
string (undefined)
values
object (undefined)
components
array[nodes] (undefined)
shouldUnescape
boolean (false)
< & >
should be unescaped, to become: < & >
defaultTransParent
option, or pass a parent
via props.<span>
using transWrapTextNodes: 'span'
.