Skip to main content

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 (
<div>
{t({
key: 'translation_key',
parameters: { i: <i /> },
defaultValue: 'This is <i>formatted</i>',
})}
</div>
)
}

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>

t({
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.

<span
title={t({
key: 'translation_key',
defaultValue: 'This is <i>not formatted</i>',
})}
>
text
</span>

renders

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