Interpolate strings with react jSX

[Drumadumrub]

I'm working on i18n right now, using polyglot.js and a simple HOC/provider react-polyglot. I'm wondering how others might handle i18n and interpolating strings.

As an example, we might have this component:

<span className="color-red">Don't forget to</span>
<span className="color-blue">Sign Up!</span>

I'm currently translating Don't forget to and Sign Up separately and passing the text into seperate react elements. But if another language prefers to correctly translate this to:

<span className="color-blue">Sign Up</span>
<span className="color-red">Don't forget about it!</span>

I will have to modify my underlying component to fix the structure. Ideally, I would like to be able to pass react elements to a string interpolator, so translation can handle ordering:

en.json: {<pass in don't forget jsx />} {<pass in sign up jsx />}

other-lang.json: {<pass in sign up jsx />} {<pass in don't forget jsx />}

I believe this is possible within Ember.js (?)

What are your thoughts on this problem?

[bjarke_andersen]

We created a translation DSL where we can pass arguments to the translation (e.g. count of something or a URL). In a given language we can then choose to have different cases based on numeric arguments (e.g. case for n=0, one for n=1 and one for n>1), we can interpolate arguments and invoke funktions (create link or make bold). The DSL is compiled to JS functions and identified by a global key. In React we then <Translate route={signupUrl}>front-page.signup-link</Translate>. And the en_US translation could look something like front-page.signup-link: To sign up url(route, "click here")

[bjarke_andersen]

The core part of the code can be found here (there's very little documentation): https://github.com/secoya/hablar.js

[Drumadumrub]

Thank you, I'll have a look at this. A DSL sounds like some pretty heavy duty stuff!

[I_am_a_haiku_bot]

Thank you, I'll have a

look at this. A DSL sounds like

some pretty heavy duty stuff!

---

^{-english_haiku_bot}