react-frau-intl

A simple component for providing localized messages to React components.

Note: formatting messages using pluralization requires the Intl polyfill.

Installation

Install from NPM:

npm install react-frau-intl

Usage

Given locale text data such as:

let messages = {
    "SomeAppComponent": {
        "Message": "this message"
    }
}

Use the i18n factory to wrap your root application component in an Intl component that will provide context to root components.

const i18n = require('react-frau-intl').i18n;
let IntlApplication = i18n(Application);


React.render(<IntlApplication messages={messages} ...otherAppProps />, container);

Then, in any component that requires localized messages:

class SomeAppComponent extends React.Component {
    render() {
        console.log(
            this.context.getIntlMessage('SomeAppComponent.Message')
        );
        console.log(
            this.context.formatMessage('save {what}', {"what":"photo"})
        );
    }
}

SomeAppComponent.contextTypes = {
    formatMessage: React.PropTypes.func,
    getIntlMessage: React.PropTypes.func
};

export default SomeAppComponent;

Contributing

Contributions are welcome, please submit a pull request!

Code Style

This repository is configured with EditorConfig rules and contributions should make use of them.