String localization in React webapp

Question

I've been having quite a difficult time figuring out what the best practices are for localization in a React app. I've found Yahoo's react-intl library after much Googling, but I haven't found much else to accomplish what I want. That library seems like it would work fine, but it would be great to at least have more than one to compare to. I'm simply looking for a way to represent different strings in each component depending on the browser locale of the user. What library or method might I use to accomplish this?

Answer 1

For what it's worth react-intl is very good. I used it on an enterprise level web application this past year, and I couldn't have been happier with it. The maintainers (I believe they are at Yahoo) are very pleasant and responded to any issues I had promptly.

I am not aware of any comparable libraries.

Answer 2

Before choosing an I18n library you might read this article and this article ...

Even if you specifically asked for React, I would recommend anyway looking into a i18n lib that is ready to be used in different frameworks, ie i18next . Perhaps your backend needs an i18n lib too? Or in future you want to replace React with something different...?

My experience shows me that i18next was right with "learn once - translate everywhere"

Further you should not only consider that you have to instrument your code (i18n) to get your app/website translated. You should think about the process too - how will you solve continuous localization , how you keep track of progress, etc...

For a modern translation management system you might for example have a look at locize ... it plays well with all json or ICU (message-format) based i18n frameworks... and provides a lot more than traditional systems.