i18n for react, formatjs, react-intl

Question

I want to use ICU standard for my i18n in my react app. I want to store my language files like http://userguide.icu-project.org/locale/localizing#TOC-.txt-resource-bundles :

de {
  key1 { "Deutsche Sprache "
         "schwere Sprache" }
  key2 { "Düsseldorf" }
}

I've found this library http://formatjs.io/react/. http://formatjs.io/ supports ICU, however I can't find any good example how to wire my language files with my app.

I was going through their tutorial and it seems I could use the component <FormattedMessage>. So e.g.

var intlData = {
    "locales": "en-US",
    "messages": {
        "photos": "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n"
    }
};

React.render(
    <Component {...intlData} />,
    document.getElementById('example')
);

then in some component I have

...
render: function () {
        return (
            <p>
                <FormattedMessage
                    message={this.getIntlMessage('photos')}
                    name="Annie"
                    numPhotos={1000}
                    takenDate={Date.now()} />
            </p>
        );
    }

My biggest problem is how to convert my language file e.g.

en-US {
  photos { "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n" }
}

into format:

var intlData = {
    "locales": "en-US",
    "messages": {
        "photos": "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n"
    }
};

Is there any parser/converter at all?

Answer 1

You should check this repository https://github.com/gpbl/isomorphic500. In the intl subdirectory there are the input files for the different languages.

You can also see which type of parsing they adopt! Hope this helps.