The <Trans> component should be used when you have react/HTML nodes integrated into a sentence.
A few cases where the <Trans> component is needed:
When words nested inside a sentence require…
<link>
<abbr>
<strong>
<i>
Where the <Trans> component is not needed:
A whole word/sentence is wrapped inside a react/HTML node.
How we use it - example
Our sentence in our JSON file:
| Code Block | ||
|---|---|---|
| ||
hello_msg: "Hello amazing world." |
If we want to add a link on the word ‘amazing’ to www.google.com.
We will first add the <Trans> where we want to render our sentence.
| Code Block |
|---|
<Trans> |
We will then state the i18nKey as a prop, this is the key we associate with our sentence in the JSON file.
| Code Block |
|---|
<Trans i18nKey="hello_msg" /> |
Our sentence will now be rendered, without any link.
To render the sentence with a link, the components prop is used.
| Code Block |
|---|
<Trans i18nKey="hello_msg" components={{linkToGoogle: <a href="https://www.google.com/"/>}} /> |
Now in our JSON file, we edit our key where we want our link to be.
| Code Block |
|---|
hello_msg: "Hello <linkToGoogle>amazing<linkToGoogle/> world" |