Using Dynamic variables

[ivandotv]

I am a little bit confused how to use dynamic variables. Consider this:

<PageTitle title={`Your name: ${name}`} />

As I understand, I can't use <Trans> macro here, so I tried:

<PageTitle title={lingui._(t`Your name: ${name}`)} />

But that gives me this:

msgid "Your name: ${name}"
msgstr "Your name: ${name}"

I know I'm doing something wrong, I just can't figure out what?

[semoal]

Remove lingui and use just the t macro

<PageTitle title={t`Your name: ${name}`} />

[ivandotv]

Can you explain the difference?

[tricoder42]

t macro itself is transformed into i18n._ call, see https://lingui.js.org/ref/macro.html#overview

[ivandotv]

On a side note, it is a little bit confusing to wrap around the logic of the library (that's the case with all translation libraries), do you have code sandbox setup or something like that, where I could see the code that gets created by the macro?

[tricoder42]

We don't, unfortunately, but checkthe docs https://lingui.js.org/ref/macro.html#examples-of-js-macros There're examples for most usecases.

In short: Lingui allows you to write ICU messages using JS syntax. E.g. instead of i18n._("Hello {world}", { world }) you can simply write:

t`Hello ${world}`

The advantage is more obvious is complex messages and once you start using JSX components inside translations