CODEWITHSUNDEEP
javascriptreactjsreact-reduxtranslation
Julio Ojeda
Julio Ojeda

Reputation: 817

Translate a text with parameters

I am making a multilingual react app. I am using redux to store an object that contains all my translations.

en.json

{
 "loginMessage": "Welcome to my app",
 "loginButton": "Log in",
 "summary": "Viewing {p1} items totalling {p2}"
}

es.json

{
 "loginMessage": "Bienvenido",
 "loginButton": "Iniciar sesion",
 "summary": "Viendo {p1} elementos totalizando {p2}"
}

Some of the text in my app are dynamic, it means it includes number or html tags. For example

Viewing 15 items totalling $300.00.

So I need to include some html tags between the strings. I came up with a partial solution which is using a function that replace the parameters for variables that I provided in. With this approach I have to provide the html tag as part of the variable something like this.

replaceAll(translation.summary, {
 "{p1}": `<strong> ${expenses.count} </strong>`,
 "{p2}": `<strong> ${expenses.total} </strong>`
})

I also need to put this function in a react parameter called dangerouslySetInnerHTML otherwise the html tags are treated as strings.

This is getting the work done but I would like to know if there is any better approach. Using a feature that I am not aware of.

Upvotes: 1

Views: 2250

Answers (2)

Roland Mate
Roland Mate

Reputation: 21

In my experience is much better to have two different url. You could use google translate. NPM

Upvotes: 2

Mohamed Ben Hartouz
Mohamed Ben Hartouz

Reputation: 179

you can use i18n-react i used that before is so useful. https://www.npmjs.com/package/i18n-react

Upvotes: 1

Related Questions