using html tags in nested translation

[mr-ezak]

Is there a way to use HTML tags in nested translation keys?
We used to work with another i18n package and it had the feature to put HTML tags in the nested translations, like this:

translation.json =>
"nameTitle": "This is your name",
"userMessagesUnread_one": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
"userMessagesUnread_other": "Hello <1>{{name}}</1>, you have {{count}} unread messages. <5>Go to messages</5>.",

file.tsx =>
`import { Trans } from 'react-i18next';

function MyComponent({ person, messages }) {
const { name } = person;
const count = messages.length;

return (

Hello <strong title={t('nameTitle')}>{{name}}, you have {{count}} unread message. Go to messages.

);
}`

[SalahAdDin]

@mr-ezak which package is that? nesting html tags could lead to a security problem, such translations have to be sanitized.

[martinkr]

Hi @mr-ezak,

Thank you for your contribution.

For templating, similar to your example using react-i18next, please take a look at the "Working With Template Strings" section in the documentation. In general, it should be working similar to your example.

Regarding HTML strings inside your translations: we currently do not plan to support for those directly as it would be a security risk and I don't want to encourage the use of such a bad practice.

React-18next's solution is to use < Trans/> component to resolve this issue.
If you create a pull-request implementing a component similar to react-i18next's <Trans /> I would be happy to add it to the library.

For our library, a quick possible workaround would be to use dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={
    {__html: t('nameTitle')}
} />

Cheers!