search

martinandert / react-translate-component

A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.
MIT License
322 stars 31 forks source link

How would you translate something that had a link? #15

Open mattotodd opened 8 years ago

mattotodd commented 8 years ago

Some of our localized strings include markup because the actual translation process results in words (or words that we would like to have marked up) that change position

For example:

In English:

Use <a href="http://www.google.com/chrome" target="_blank">Chrome</a> or <a href="http://www.mozilla.org" target="_blank">Firefox</a> to stream your recordings directly.

In German:

Streamen Sie Ihre Aufzeichnungen direkt in <a href="http://www.google.com/chrome" target="_blank">Chrome</a> oder <a href="http://www.mozilla.org" target="_blank">Firefox</a>.

But these tags get stripped when I use this library, and i understand its an issue with setting markup directly with react. Breaking the phrase up in to smaller parts does not solve the issue because the composition of the parts depends on the language.

Any thoughts on how such a case could be solved?

beaur commented 8 years ago

I'm interested in this too, would be nice to be able to add bold tags or other formatting on my translations

martinandert commented 8 years ago

Did you check the code in the example directory? It probably has what you're looking for. You can see the code in action under http://react-translate-demo.martinandert.com/

beaur commented 8 years ago

Ah ha it looks like on line 100 there is an 'unsafe' parameter?

martinandert commented 8 years ago

Ah ha it looks like on line 100 there is an 'unsafe' parameter?

Exactly. I probably should mention its usage in the Readme. That prop gets passed to react-interpolate-component, and IIRC this one has info on unsafe in its Readme.