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 (
    <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>