Use React i18next’s <Trans> when a sentence needs to be translated as a whole and includes React elements such as a link or formatting. For plain text, use t(). <Trans> handles interpolation, but it does not load translations or rerender a component when the language changes; use useTranslation or withTranslation for that integration.
When should you use <Trans> instead of t()?
Choose <Trans> when translators need to rearrange text and React elements together as one sentence—for example, a sentence containing a link or emphasized phrase. Choose t() when the value is ordinary text without React nodes embedded in it. The step-by-step guide describes <Trans> as translating a JSX tree in one translation.
<Trans> obtains a suitable t() function from the context instance or global instance by default. Pass an i18n or t prop to override that choice. For translation loading and language-change rerendering, connect the component with useTranslation or withTranslation; these are among the integration patterns in the quick-start guide.
How do JSX children become translation tags?
<Trans> converts its child tree into a translation string. Text remains text, interpolation objects become interpolation values, and React elements wrap their children in tags corresponding to their positions in the child array. A link may therefore appear in the resource as an indexed tag such as <1>...</1>. If you reorder the JSX children, the generated index can change, so keep the translation resource aligned with the component tree.
#1 Best Overall
Use named components when indexes are hard to maintain
For a more readable resource, pass a components object and refer to its keys in the translation, such as italic or bold. The documentation cautions that existing self-closing HTML tag names are reserved and should not be used as mapping keys. An array form uses numeric component indexes and can be useful with ICU syntax. The reference notes IcuTrans in connection with the ICU macro, but does not recommend direct use of IcuTrans.
Simple HTML nodes may stay readable
With transSupportBasicHtmlNodes enabled, simple nodes such as <br/>, <strong>, <i>, and <p> may be retained in translation strings when they have no extra attributes and meet the documented child constraints. More complex elements are represented as indexed nodes. transKeepBasicHtmlNodesFor controls which basic nodes are retained when generating default values.
How do interpolation and plurals work?
Interpolate values
Interpolation values can be placed in the children or passed through the values prop. The TypeScript reference describes a workaround that casts an interpolation object to a suitable record type or any. Setting TypeScript’s allowObjectInHTMLChildren is another option, but it weakens type safety globally.
Pass a count for pluralizable text
For pluralized text, provide a numeric count. According to the component reference, beginning with react-i18next v16.4.0, count can be inferred when {{ count }} appears in children. Inference requires a JavaScript number. An explicit count takes precedence, including count={0}; when using a key without children, the count prop is still required.
Recommended Free Tools
Keep generated lists out of default strings
When children are generated with Array.map(), put i18nIsDynamicList on the wrapping element. This tells the nodeToString path used by saveMissing not to include generated list children in the default string.
Which props and configuration settings matter?
The reference lists these optional props: i18nKey, ns, t, count, context, tOptions, parent, i18n, defaults, values, components, shouldUnescape, and transDefaultProps. Although the API marks them optional, provide a key when natural-language text is not serving as the key. When using natural-language keys, the docs recommend a dedicated ns prop instead of embedding the namespace in i18nKey.
transWrapTextNodes can wrap text nodes in an element such as span. The docs describe it as a workaround for a Google Translate issue: DOM manipulation by the translation tool can conflict with React. For React 15 or earlier, set defaultTransParent or pass parent.
How can you troubleshoot an unexpected translation string?
- Inspect the
<Trans>instance and itsprops.childrenin React Developer Tools to see the actual child tree. - Enable
debug = truein i18next initialization to inspect debug output. - Use
saveMissingto help reveal the generated default string and any tag indexes. - Compare the child order with the indexed tags in the resource; React element positions determine which index each tag uses.
What happened to the older Interpolation component?
The migration guide says the older Interpolation component was deprecated, replaced by <Trans>, and removed in react-i18next v10. See Migrating from v9 to v10.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Best Value
For the full API, consult the Trans Component reference. The i18next instance documentation also describes the relevant basic-node configuration.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
