Skip to main content
Version: 4.x.x

Tags interpolation

React integration supports tags interpolation, which can be used to use custom tags in translations and mapping them to React elements.

Example usage

(same can be used with T component)

const Component = () => {
const t = useTranslate()

return (
key: 'translation_key',
parameters: { i: <i /> },
defaultValue: 'This is <i>formatted</i>',

will render

Formatted text

How it works?

Tags in translation are mapped to react components supplied in parameters and t function returns ReactNode(s) instead of simple string. The part of the translation which is inside of the tag is passed as a children to the given tag.

You can also pass a function which will return React component:

const myFunction = (content) => <i title={content}>{content}</i>

key: 'translation_key',
parameters: {
i: myFunction
defaultValue: 'This is <i>formatted</i>',

You can also use nested tags.

What if I use t in parameters

For these cases t function guarantees to return string if you don't supply any react elements (or functions) in parameters, if there are tags in the translation they are escaped.

key: 'translation_key',
defaultValue: 'This is <i>not formatted</i>',


<span title="This is <i>not formatted</i>">text</span>