React and locaization

Hi everyone.

For Meteor+Blaze I’m using anti:i18n, awesome package
In templates - {{i18n "some.label"}}
In JS - i18n('some.label')
And when I need change locale, just simple line in onClick event: i18n.setLanguage(language). And everything magically changing! (-:

How do you localize your React/Redux apps? Is there a simple and elegant way, like anti:i18n, for React?

Lucky people who do not need it…

2 Likes

Not sure of any meteor-specific packages, but with NPM support in 1.3 you could try these:

Not sure how helpful these are to you but worth a look all the same. To add one of them to your meteor app, you run (as an example): meteor npm install i18n-react --save

You can take a look at http://messageformat.meteorapp.com/examples which has direct react support out of box!

1 Like

Yes, yes, I know about these and many other packages, like:

But, at first, I am interested in React-style localization.
Secondly, interested in practical experience or examples.

For now I prefer react-i18nify, need some experiments…

Too sad…I never thought that such a simple operation will be so difficult to implement

@none what feature or syntax are you looking for exactly? Could you give an example to the syntax that you would feel more comfortable with?

I think, I found what I wanted: react-i18nify and react-redux-i18n. Easy integrate and easy to use. I need some more experiments.

I don’t quite get the difference between react-i18nify and messageformat.

What is it that you find lacking in messageformat that react-i18nfy provides?

Messageformat uses Session, I think, react-i18nify - not. I try to avoid using Session, if I use React, only React-style.
But messageformat - awesome package.

Well it does not rely on Session, but it does provide a backwards compatibility fallback for older clients who use session to track the current locale. But @gadicc would know better.

Other than that, and being a “react-only” solution, do you find a specific feature or syntax that react-i18nify provides you that messageformat lacks?

PS: I’m not a messageformat contributor/advocate and in fact trying to expand my react toolbelt with an i18n solution. I was eyeing messageformat because it can be used in both blaze and react, which I find to be an advantage. I am trying to benfit from your experience :slight_smile:

Thanks, @serkandurusoy, for the ping. You’re 100% correct, Session is used just for backwards compatibility. For React, it’s no problem to pass a LANG prop all the way down your component tree, but as a convenience, we’ll use the current locale if this is missing and update when it’s changed.

There are a lot of solutions for i18n, and I think everyone will always have their preference. The goal for meteor-messageformat was to be an “all-in-one” solution, where we handle everything for you; extraction of text keys automatically from your files on save, storing of user locale preference, transport of updated strings to the client, a web UI for (crowd) translation, rendering-framework integration, etc. But it’s not for everyone. And as always, my customary no ETA for the final v2.0 release even though a lot of people have been using the preview for almost a year now :slight_smile:

2 Likes

Perhaps you should name the new version v15.0 so that you get more love from react developers :wink:

3 Likes

And npm version of messageformat (-:

Yeah, I’m excited about the prospects of moving to the greater node ecosystem. This is the reason why I posted recently that we’re going to stop releasing updates for Meteor < 1.3 later this year, so we can rely on ES6 and npm! Exciting times :slight_smile:

3 Likes

Ok, guys
First of all, Gadi, you need split documentation. Please (-: Where is React only docs??

And how to install Messageformat? (-:
I did:

  1. meteor add msgfmt:core@2.0.0-preview.21 msgfmt:ui@2.0.0-preview.11 msgfmt:extract msgfmt:react
  2. sudo npm install -g meteor-messageformat
    3 mf_extract
    Error: Messageformat not installed in this project.

I want to localize simple object:
<TextField hintText='Hint Text' floatingLabelText='Label text' />

I need hintText and floatingLabelText on different langs, depends on, for example, props locale…

Yeah I know :slight_smile: It’s still a pre-release. Docs are actually next on my list if I’m not mistaken. But everything in the READMEs from the v2 branch supersede the docs on the site. So you can uninstall the meteor-messageformat npm package, and there’s no more mf_extract, it’s automatic now on each meteor run and every file save.

Ok so the main react helper is the <MF> component. For what you’re describing, you’d use the regular JS function. e.g.

<TextField
  hintText={ mf('hint', 'Hint Text', props.locale) }
  floatingLabelText={ mf('label', 'Label Text', props.locale) }
/>

Docs will be improving, I promise :slight_smile: I know the situation is bad.

1 Like

OK (-:
About mf() I understood from docs. But in my case I need Ukrainian and Russian translation… Where these translations?! Where I should place them and how to load them?? It’s not clear in docs (-:

You can add meteor add msgfmt:ui@2.0.0-preview.11 and just go to /translate in your app, there’s a web UI to do the translation (like this one).

It currently supports iron-router and flow-router. If you’re using react-router, you might have to open an issue for us to figure out the best way to do this, or maybe in https://github.com/nicolaslopezj/meteor-router-layer/ since this is what we use for router agnosticism).