Page Comparison

...

Examples of where the <Trans> component is needed:

• <link>

• <abbr>

• <strong>

• <br>

Where the <Trans> component is not needed:

• A whole word or sentence is wrapped inside a react/HTML node.

Conventions

1. HTML values are kept out of the locale files

   • HTML values within translation key text can decrease readability.

2. Hard coded text is not used outside the locale files

   • Using hard coded text within the <Trans> component means the text has to be maintained in two places. Therefore, we should avoid using hard coded text outside the locale JSON files for easy maintenance.

3. Links used in the home page are kept inside the homeConfig.ts file

   • This is for easy alteration if links are changed

...

Adding a link with the <Trans> component

Our plain sentence in our JSON file, without any markup:

...

<Link href='https://www.google.com/'>{t('hello_msg')}</Link>

...

Adding

...

formatting to a word in a sentence

Our key in the JSON file:

...

"validation_missing_values": "The columns <bold>“Local code”</bold> and <bold>“Local meaning”</bold> must contain data. One or more cells in these columns is empty. Please fix and retry."

Adding line breaks in text

Our key in the JSON file:

"OpenRS": "OpenRS is a resource sharing initiative of the Open Library Foundation.<break/>The open source project is reinventing resource sharing to meet the needs of different types of consortia, using open standards and native integration to provide consortia with robust and extended functionality for consortial resource sharing."

Now say we want to break up the text to make it more readable.

• To do this we would use the <Trans> component again in the same way we did with links.

  • We use i18nkey as a prop to state the key.

  • We then use the components prop to reference the HTML value.

• Any name can be used here to represent the <br> HTML.

  • In this case, I have used the word ‘break’ as it makes it clear what the HTML represents.

<Trans 
  i18nKey="openRS"
  components={{break: <br/>}}>
</Trans>

Then, in the JSON file, the key is altered to include the HTML.

"openRS": "OpenRS is a resource sharing initiative of the Open Library Foundation.<br/>The open source project is reinventing resource sharing to meet the needs of different types of consortia, using open standards and native integration to provide consortia with robust and extended functionality for consortial resource sharing."