Is it possible to interpolate translation strings with more complex components?

[chrisgms]

I see that it is possible to replace params with values wrapped in components like so:

const i18nStrings = {
    "hello": "Hello {name}"
}

{t('hello', {
    name: <strong>John</strong>,
 })}

Would it be possible to have interpolation without replacing params when needing to use more complex components or breaking up a string into different parts like so:

const i18nStrings = {
    "hello": "Hello <1>World</1>"
}

<Interpolate t="hello">Hello <span className="custom-class">World</span></Interpolate>

[QuiiBz]

I'm not sure to understand why this Interpolate component is necessary. You can achieve the same by nesting multiple t():

export default {
    hello: 'Hello {content}',
    world: 'World'
} as const

{t('hello', {
    name: <strong>{t('world')}</strong>
 })}

Could that help for your use-case? If not, could you explain why you'd need an Interpolate component?

[chrisgms]

Ah good point, did not think about nesting multiple t()'s. This should cover the needed cases. Thanks!

[wesnolte]

@QuiiBz is this functionality documented?