Parameter Interpolation

Sometimes we need to pass some parameters to the translations. It could be the user's name, the number of pages in a book or whatever you want.

You can simply provide the parameters by appending them after the key or default value.

If we have a key my_key and translation text value Hello {name} {surname}, the curly brackets tell the message formatter that it should replace wrapped string with provided value.

info

Tolgee uses ICU message format in all its implementations. To learn more about ICU message format, visit this ICU message format doc page.

To provide parameters and its values, append them after the key or default value delimited with ":" character. Multiple parameters are delimited with "," character.

<h1>{{hello,Hello {name} {surname}:name:John,surname:Doe}}</h1>

You can also omit the default value, ft you don't want to provide it in your code.

<h1>{{hello:name:John,surname:Doe}}</h1>

Parameter interpolation when translating imperatively

To provide parameters object to the translate function pass it as the 2nd argument.

tg.translate("hello", {name: "John", surname: "Doe"}).then((t) => ...);

or use props object

tg.translate({
  key: "hello",
  defaultValue: "Hello {name} {surname}.",
  params: {name: "John", surname: "Doe"}
}).then((t) => ... );

The same way you can pass the values to the instant method.

const value = tg.instant('hello', { name: 'John', surname: 'Doe' });

or use props object

const value = tg.instant({
  key: 'hello',
  defaultValue: 'Hello {name} {surname}.',
  params: { name: 'John', surname: 'Doe' },
});