This is the second preview release of React Intl v2!
Details and discussion: #162
$ npm install react-intl@nextNew Breaking Changes
Replaced defineMessage with defineMessages
Replaced defineMessage() (singular) with defineMessages() (plural). This allows multiple messages to be defined in one call. We noticed that most components that used defineMessage() were defining more than one message. This also allows for local identifier to be used that are the same or different than the id in the message descriptor.
const messages = defineMessages({
label: {
id: 'send_button.label',
defaultMessage: 'Send',
},
tooltip: {
id: 'send_button.tooltip',
defaultMessage: 'Send the message'
}
});Updated dist/locale-data/* Files to UMD
This keeps with the theme of v2 where locale data is provided as modules, instead of causing side-effects to the ReactIntl object.
With the change, the locale data files in dist/locale-data/ will expose the data at: ReactIntlLocaleData.<lang>. Previously the locale data files would automatically call addLocaleData() on the ReactIntl global. This decouples the loading of the locale data files from the loading of the library and allows them to be loaded async.
<script async src="/path/to/react-intl/dist/react-intl.min.js"></script>
<script async src="/path/to/react-intl/dist/locale-data/fr.js"></script>
<script>
window.addEventListener('load', function () {
ReactIntl.addLocaleData(ReactIntlLocaleData.fr);
});
</script>New Features
Added injectIntl() HOC Factory
This function is used to wrap a component and will inject the intl context object created by the <IntlProvider> as a prop on the wrapped component. Using the HOC factory function alleviates the need for context to be a part of the public API.
When you need to use React Intl's API in your component, you can wrap with with injectIntl() (e.g. when you need to format data that will be used in an ARIA attribute and you can't the a <Formatted*> component).
import React, {Component, PropTypes} from 'react';
import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
const messages = defineMessages({
label: {
id: 'send_button.label',
defaultMessage: 'Send',
},
tooltip: {
id: 'send_button.tooltip',
defaultMessage: 'Send the message'
}
});
class SendButton extends Component {
render() {
const {formatMessage} = this.props.intl;
return (
<button
onClick={this.props.onClick}
title={formatMessage(messages.tooltip)}
>
<FormattedMessage {...messages.label} />
</button>
);
}
}
SendButton.propTypes = {
intl : intlShape.isRequired,
onClick: PropTypes.func.isRequired,
};
export default injectIntl(SendButton);Note: The context-based access to the API can still be used. The purpose of injectIntl() is to hide it as an implementation detail.
Improved Babel Plugin
babel-plugin-react-intl now stabilizes the defaultMessage by parsing and pretty-printing it; this removes any insignificant whitespace, and should yield less false-positive re-translations.
A new enforceDescriptions option has been added to require that all declared messages must contain a description for translators. Also, the description field will now always be removed from the source code to save k-weight.
The plugin has also been updated to deal with the switch from defineMessage to the new defineMessages.