Tags Interpolation

You might want to add formatting to certain part of the translated string. For example, let's take the translated string Tolgee and React work well. You want to add italics to the word Tolgee and bold to the word React. Using the React SDK, you can implement this easily.

The React SDK, uses FormatIcu which supports tags interpolation. You can add custom tags in translations and map them to React elements to implement such formatting.

There are two different ways to implement tags interpolation.

1. Passing an element

info

Currently, non-closing tags and self-closing tags are not supported #3101.

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>
  );
};

The above example code will render the following text.

2. Passing a function

Example usage

You can also pass a function that returns a React node. This function can take content as an argument such that (content: React.ReactNode) => React.ReactNode

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

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