Lingui handling only strings in variables

Hello Lingui team.

This is more of a feature request, to see what’s your view on this.

So, currently lingui only handles strings as variables, so I cannot do something like this:

const savings = <NumberFormat value={123} />;
return <Trans>With our company you save {savings}!!</Trans>

this will result in: With our company you save [object Object]

You may wonder why this is important for me. Well, we have a fairly big application which shows all kind of numbers and amounts in different places, thus we use redux selectors for a lot of them. So, in order to reduce duplicated code the values are returned from selectors as a <NumberFormat> component. And then it is used in some translatable message like “With us you save {savings}”. This is also nice for translators because they see the variable name and understand the context of given sentence.

The workaround that I have for this issue is this component:

const Tag = (props) => (props.content);
export default Tag;

and use it like this:

const savings = <NumberFormat value={123} />;
return <Trans>With our company you save <Tag content={savings} />!!</Trans>

but it’s less optimal because translators then get With our company you save <0>!!

Is there any plan to add support to React components in variables? Looking in the code there’s few places where array are joined together into one string, than this string is parsed in other place, so that’s not one line change to make it work. But shouldn’t be too hard either.

I could try doing this, but I need your opinion on this first.

[tricoder42]

Fixed in latest release v2.3.0.

[haruelrovix]

Hi @tricoder42 @machour @ktunkiewicz ,

Is it possible to implement this but use a combination of i18n and t macro instead of Trans component?

e.g.

i18n._(t`Hi ${<strong>user.name</strong>}`)

Thanks.