i18next, react and HTML provided as a variable

Question

I have a project where users can provide a text for searching. This text CAN be HTML, and because of it, we won't escape it, as in the source, it is not escaped.

We provide a whole bunch of functionality, including deleting not needed searches.

We support many languages (including Japanese, among others), and therefore we cannot decide upfront in which place in translation the search we want to delete will be placed. So we use Trans component. And here the problem starts.

React itself handles HTML strings quite well. It just displays source code <a href="example.com">link</a>. But Trans interprets HTML (and displays link) or escapes HTML and displays <a href="example.com">link</a>.

I tried changing options (like escapeValue) or manually working with the string, which is passed as a value to translation. Nothing works as expected.

Is there any way to force Trans to behave as a react component and display HTML source code?

Answer 1

I found the solution:

in i18n.init set

interpolation: {
  escapeValue: true
}

Then in your Trans component, use prop:

shouldUnescape={true}

Working codesandbox is here