React-frau-intl NPM

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;