React-i18next: Way to render special characters in Trans interpolation

[greenjoe]

Is your feature request related to a problem? Please describe.
I want to display a translated message containing a variable in the middle, variable should be displayed in bold. I have a code like this

<Trans i18n={i18next} i18nKey="userCreated" values={{name: 'Tom'}}>
  User with name <strong>{{name}}</strong> has been created.
</Trans>

and the translation file like this

"userCreated": "User with name <1>{{name}}</1> has been created.",

It works fine only as long as name doesn't have any special characters like & or <>. If escaping values is turned on, & is rendered as &, giving:

User with name Tom&Jerry has been created.

Setting
interpolation: {escapeValue: false},
makes it work correctly for & but characters like < or > can break the whole message, for example name: "<Tom>" shows

User with name has been created.

A bit longer description can be found in my stackoverflow thread:
https://stackoverflow.com/questions/58269428/i18next-react-trans-component-escaping-characters-correctly

Describe the solution you'd like
If I set name: "<Tom>" in the code above I would like to see

User with name <Tom> has been created

[jamuhl]

setting interpolation: {escapeValue: false}, is required in react -> as react already does escape content (it's also shown like this in all samples and guides)

regarding <Tom> nothing we can do...Trans uses a parser and detects as a Dom node...

[greenjoe]

Is there a way to find out which characters can break the parser? I mean if I knew for sure that only <> characters can break it I could forbid using them or explicitly escape them before passing to the component.

[jamuhl]

rather sure it's only <> as those get handled as a html tag trying to be replaced with the components...

[jamuhl]

Would have to test a little and see if we can fix that so <Tom> gets not replaced...but currently hard on time...but should be doable.

[cosarara]

There is no known workaround to make "<" appear in a translated string when using Trans at the moment, right?

[jamuhl]

@cosarara > still works just <something> gets in the way as it tries to find a react element to place there (html parsing)

[greenjoe]

@cosarara I finally used the workaround from here: https://stackoverflow.com/a/58335085/1449825

[tigerabrodi]

@cosarara Check this out https://github.com/i18next/react-i18next/issues/1205#issuecomment-738676560, there are also more information in the issue :+1:

[tigerabrodi]

@jamuhl @adrai This issue has been opened for very long and no recent follow ups, do you think we should close this?

Thanks! :pray: :smiling_face_with_three_hearts: