i18n package that works with React?

I tried using tap:i18n and it mostly works. I can reference keys using TAPi18n.__(keyname). Though setting the language is not so graceful, as I noticed I have to do TAPi18n.setLanguage in every single component. Doing it in the parent (layout) component doesn’t seem to do the trick.

Actually, it does sort of work. In my Layout component that wraps every page/component, if I do this:

  componentWillMount() {
    TAPi18n.setLanguage('es');
  },

Then text appears in Spanish (not reactively, which is fine I suppose). And if I hit reload, it’s still in Spanish. But, if I shift+reload, it’s in English! It snaps back to Spanish the next time the page renders. Very odd.

Hi, this works fine: Universe:i18n

1 Like

In universe:i18n translation tags are reactive <T>ok</T> in react component.
Additionally you can register listener by method i18n.onChangeLocale and refresh manually.

1 Like

Thanks guys, I’ll check out that package.

Try this one. https://github.com/gwendall/meteor-tapi18n-react

Tap component unfortunately uses ReactMeteorData. And this mixin is hacky and this makes that it has large overhead.

It seems to be the only way to get a fully reactive call to the TAP.__ function though for now.

Why “unfortunately”? ReactMeteorData mixin is the only* way to integrate reactive elements into React anyway.

*EDIT: Ok, not the only way, but it’s the “official” way per the Meteor React tutorials.

Actually It is other way, you can use tracker autorun in componentWillMount and set it to state or AutorunMixin from package universe:utilities-react

https://github.com/vazco/meteor-universe-utilities-react/blob/master/mixins/autorun.import.jsx

The MDG guys take a similar approach. This code does not seem particularly hacky.

Please look what they do with state:

https://github.com/meteor/react-packages/blob/devel/packages/react-meteor-data/meteor-data-mixin.jsx

Take a look for GUI https://atmospherejs.com/jss/i18n