[React Intl ES6][]

This library provides React ES6 Components for internationalizing React web apps. The components provide a declarative way to format dates, numbers, and string messages, including pluralization.

Overview

React Intl ES6 is a fork of React Intl - the docs can be found on the website:

Features

Display numbers with separators.
Display dates and times correctly.
Display dates relative to "now".
Pluralize labels in strings.
Support for 150+ languages.
Runs in the browser and Node.js.
Built on standards.

Example

There are many examples on the website, but here's a comprehensive one:

var FormattedMessage  = ReactIntl.FormattedMessage;
var FormattedRelative = ReactIntl.FormattedRelative;
import {
    Intl,
    FormattedRelative,
    FormattedMessage,
} from 'react-intl-es6';

class PostMeta extends Component {
    static contextTypes = {
        intl: React.PropTypes.object
    };

    render() {
        return (
            <FormattedMessage
                message={this.context.intl.getMessage('post.meta')}
                num={this.props.post.comments.length}
                ago={<FormattedRelative value={this.props.post.date} />} />
        );
    }
}

var post = {
    date    : 1422046290531,
    comments: [/*...*/]
};

var intlData = {
    locales : ['en-US'],
    messages: {
        post: {
            meta: 'Posted {ago}, {num, plural, one{# comment} other{# comments}}'
        }
    }
};

class App extends Intl {
    constructor() {
        super( intlData.locales, intlData.messages );
    }

    render() {
        return (
            <PostMeta post={post} />
        );
    }
}

React.render(
    <App />,
    document.getElementById('container')
);

This example would render: "Posted 3 days ago, 1,000 comments" into the container element on the page. The post.meta message is written in the industry standard ICU Message syntax, which you can also learn about on the FormatJS website.

CDLR pluralization rules: In some languages you have more then one and other. For example in ru there are the following plural rules: one, few, many and other. Check out the official CDLR documentation from unicode.org http://www.unicode.org/cldr/charts/27/supplemental/language_plural_rules.html for all languages.

Note: You could also write =0 { No comments yet }

Contribute

Let's make React Intl and FormatJS better! If you're interested in helping, all contributions are welcome and appreciated. React Intl is just one of many packages that make up the FormatJS suite of packages, and you can contribute to any/all of them, including the Format JS website itself.

Check out the Contributing document for the details. Thanks!