Internationalization in React?

1

Is anyone working with i18n in a Meteor/React project? We used msgfmt for to get our Blaze app in English and Chinese, but now I need to get a Meteor/Redux/React app UI working in English, Japanese and Chinese. Just looking for success stories (and cautionary tales)! How did it go?

Cheers!

2

I used https://github.com/TAPevents/tap-i18n for internationalization in React, it was very easy but the package was made for blaze so in my next project I’ll try to use https://github.com/yahoo/react-intl.

1 Like
3

just got this message from a friend. Thought I’d share:

I used https://github.com/i18next/i18next/blob/master/README.md
GitHub
i18next/i18next
i18next internationalization framework

Then I wrapped it in a react a component

There is an official react version of that package but I found it unnecessarily complicated

4

If you’re interested, the react branch of the todos app was updated to use universe:i18n (you can see the specifics here), which is the Guide’s current React i18n recommendation.

5

I’m using universe:i18n in ReelCrafter. Though admittedly, I’m only using English right now. :wink: But there are already two benefits: 1) I’m in a position where I can easily add a second language, and 2) all my UI verbiage is together in a single file, so I don’t have to go hunting around in hundreds of JS files for it.

1 Like
6

Thanks Sam! Sorry I don’t remember but is ReelCrafter a React or Blaze project?

7

No prob! It’s React.

8

We startet using https://github.com/vazco/meteor-universe-i18n which uses yaml-files for the translations in two mantra-projects.

We soon created an adapter/service for it to add more functionality. We also wanted to replace the yaml-files with something that is collection-based, so that the customer can change their texts themselves.

I released that service as a npm-package: github.com/panter/manul-i18n

It can use two different types of storages: a collection-storage and the yaml-storage from https://github.com/vazco/meteor-universe-i18n

It further provides a <T>-Component (also inspired from https://github.com/vazco/meteor-universe-i18n)
which has additional features:

  • It allows the devs or admins to see the keys instead of the translation on demand. E.g. in our apps the user can press and hold the ALT-Key to show the translations (with help of https://github.com/panter/meteor-keypress)
  • An admin or dev can click on a <T>-Component to jump to the translation (you have to provide a function or action for that). E.g. in our apps, the admin can jump to a form where he or she can update the texts (with https://github.com/panter/manul-admin)
9

does this package support plurals?

with messageFormat:

{{#mf KEY=‘there_are_widgets’ NUM=getNum}}
There {NUM, plural,
=0 {are no widgets}
one {is one widget}
other {are # widgets}
}.
{{/mf}}

There are no widgets.
There are 2 widgets.