[question]: Is there any way to use a component inside a message?

[SanichKotikov]

Hi,

Is there any way to use a component inside a message? Something like how it works in react-intl or lingui.

<Text
  id='some.id'
  defaultMessage='Some message with <link>link text</link> in the middle.'
  link={<CustomLink to='...' />}
  // or link={(text) => <CustomLink to='...'>{text}</CustomLink>}
/>

Thanks!

[pret-a-porter]

Hi, it is possible, in your case it would be:

<Text
 id='some.id'
 defaultMessage='Some message with {link} in the middle.'
 link={<CustomLink to='...'>link text</CustomLink>}
/>

I will check, why it does not work, when we pass function as param.

[SanichKotikov]

Thanks, but as I understand it requires two templates: Some message with {link} in the middle. & link text. But I'm talking about single template: Some message with <link>link text</link> in the middle.. It's more useful and some localise platforms has free/paid limitations based on strings count.

[pret-a-porter]

Yes, it make sense. For now, you can do it with html tags, like:

<Text
  html
  id='some.id'
  defaultMessage='Some message with <a class="%css_class%" href="{url}">link text</a> in the middle.'
  url='%url%'
/>

Therefore you can use any html syntax inside message, but jsx syntax inside message does not supported.

[SanichKotikov]

but jsx syntax inside message does not supported.

That's the case. I suppose, it might be a good feature.

[pret-a-porter]

Yeah, thank you for the idea! I will research, how it can be implemented nicely, but in general I would strongly recommend avoid using any code inside translations. It creates hard connection between translations and implementation of view.

[taozhou-glean]

Just curious any update on this ? ;) it would be great if we can support something similar to Trans from react-i18next. I think the benefit is that the translator will get the full context, and that can be very helpful to have accurate translations