How to handle html table in react i18n?

Question

I am having table structure with the text. I want to localize it using react-i18next.

Using Trans, it supports basic html tags like
. However, I am having email template as follows:

<table><tr><td>Hello User</td></tr><tr><td>Please visit the site for exclusive offers</td></tr></table>

I don't want to separate out table and text. I want it in translation.json itself. Is there any way out to achieve this kind of scenario in i18n?

Answer 1

Just supply your HTML tags to the Trans component. Where the key in the component object matches the HTML tag within your translation JSON. Modify as you see fit.

<Trans i18nKey="yourKey" components={{table: <table></table>, tr: <tr></tr>, td: <td></td>}}/>