Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

i18n for react, formatjs, react-intl

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?

like image 383
DeBoer Avatar asked Jul 27 '15 09:07

DeBoer


1 Answers

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.

like image 80
piratz Avatar answered Sep 23 '22 00:09

piratz