I have a react based application and use i18next's Trans component for translations.
Let's say we have a user registration form and we want to confirm that a new account has been created by displaying the following text:
User with name NAME has been created.
where NAME is provided by user and is displayed in bold.
What I have now is the following code in react:
<Trans i18n={i18next} i18nKey="userCreated" values={{name: 'Tom'}}>
User with name <strong>{{name}}</strong> has been created.
</Trans>
and the following translation string
"userCreated": "User with name <1>{{name}}</1> has been created.",
For a simple case with name: 'Tom'
it works fine and displays
User with name Tom has been created.
However I would like to let users use special characters in their names. When I change name to Tom&Jerry
I'm getting
User with name
Tom&Jerry
has been created.
After doing some research I thought that the issue is that both i18next and react escape their inputs and so the name is escaped twice. I turned off the i18next escaping in i18next.init
by adding the following option
interpolation: {escapeValue: false},
That fixes the Tom&Jerry case:
User with name Tom&Jerry has been created.
but there are some inputs that break it completely, for example setting name: 'Tom<'
renders like this (everything after name is bold):
User with name Tom has been created.
and setting name: '<Tom>'
gives me:
User with name has been created.
(no name displayed at all). I would like it to render like this:
User with name
<Tom>
has been created.
Is there a way to make it work?