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?

why struggling with icu message format if you can have react.i18next.com ;) — jamuhl
– jamuhl, Commented Sep 18, 2017 at 12:38

piratz · Accepted Answer · 2015-07-27 12:29:50Z

6

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.

answered Jul 27, 2015 at 12:29

piratz

3611 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

djskinner Over a year ago

Thanks for pointing this example application out. It's a very good example of how to utilise FormatJS in a Flux/Fluxible application

Collectives™ on Stack Overflow

i18n for react, formatjs, react-intl

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related