React + i18n best practices in Meteor 1.3+

React seems to work great together with Meteor, which has been well demonstrated in the official todos example app (see react branch). I’ve been using this demo to do the first Meteor+React steps and was able to see most of the best Meteor practices at a glance, which turned out to be really helpful in my first real project.

One thing is missing in the Todos app though, it is how to make the React components translatable. Nearly every project these days is multilingual, but there seems to be no vivid conventional solution for such a feature in the Meteor community (at least I was not able to find one). There are some discussions of using tap:i18n for Blaze and few pre-Meteor-1.3 tips, which are now not so relevant.

I’m sure someone has already figured out how to make Meteor+React apps translated (e.g. using react-intl or messageformat). Maybe there is even an elegant and robust way of switching between the languages (with no page reload and with downloading locales on fly as there may be too many). Some good-looking admin interface for maintaining the translations can also be a part of ‘an ideal solution’.

I will be really grateful if somebody could share their thoughts on how to do i18n in Meteor+React apps. Perhaps, somebody could even push some code to Todos demo and reference a related issue I created in that repo.

All kings of thoughts are welcome! MDG’s attention and time will be also appreciated, since a smooth and clear approach to i18n is one of the key things the developers are looking for when choosing between the alternative frameworks.

4 Likes

I’m the author of meteor-messageformat. I can’t comment for other approaches, but the v2 pre-release has React support. It looks like this: http://messageformat.meteorapp.com/examples. The keys are are automatically extracted from your files on each save and translation is through a (Blaze-based) web-UI that can run locally or on deployment for crowd-sourced translations (e.g. see the Translate nav on the site). The docs need some work but iirc that’s the last big thing to be done before the final release.

1 Like

MessageFormat seems promising, thanks for your reply @gadicc! I don’t know how busy you are in the near future, but it would be just great if you could contribute to the Todos app and share an integration of MesageFormat with React and Meteor with others. I can supplement your demo with a Russian translation and we will be able to reveal any problems with the complex morphologies if there are any.

I guess you have chances to make your library a default choice in multilingual Meteor+React apps if the solution turns out to be simple and scalable!

1 Like

Thanks @kachkaev. It feels like I’m permanently overworked but I think your idea is a good one and I’m tracking it here for the 2.0 milestone.

1 Like

I’m just starting my first multilingual meteor project also.

@gadicc: it seems on first look that messageFormat is for localizing the interface, but I would need something else for displaying translations of content from the database (tap:i18n for example). Is that true?

Thanks!

@sagannotcarl, yeah, that’s correct. This is planned for the future, but no ETA; you’ll have to use something else for now.

Hi, Alexander.

I spent a few days in the research of the possibility of localizing React apps. It’s awful.
For now I stopped on react-redux-i18n and react-i18nify, because it’s React-way. Gadi wrote awesome package, but it’s meteor-way, and it uses, I can be wrong, Sessions, but I try to avoid using this and I try to replace Sessions on Redux store

2 Likes

I’ve just switched from using tap:i18n to gadicc/meteor-messageformat so that I can more easily migrate my app from using Blaze to React in future.