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.
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' },
});