Skip to main content
Version: 5.x.x

Tags interpolation (React)

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

Example usage

import { FormatIcu } from '@tolgee/format-icu';

...

tolgee.use(FormatIcu())
const Component = () => {
return (
<div>
<T
keyName="translation_key"
params={{ i: <i /> }}
defaultValue="This is <i>formatted</i>"
/>
</div>
);
};

will render

Formatted text

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

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

<T
keyName="translation_key"
params={{
i: myFunction,
}}
defaultValue="This is <i>formatted</i>"
/>;