formatjs/formatjs v1.1.0-rc-3

React Intl Components — Applying Feedback

on GitHub

Some great feedback came in from people trying out the previous two v1.1.0 RC releases — Thanks!

The major updates in this release are the renaming of the exports, making the components self-closing, and supporting React Elements as prop values when formatting messages.

var IntlMixin        = ReactIntl.IntlMixin;
var FormattedNumber  = ReactIntl.FormattedNumber;
var FormattedMessage = ReactIntl.FormattedMessage;

var msg = 'Hello, {name}!';

var Component = React.createClass({
    mixins: [IntlMixin],

    render: function () {
        return (
            <ul>
                <li><FormattedNumber value={0.9} style="percent" /></li>
                <li><FormattedMessage msg={msg} name={<b>Eric</b>} /></li>
            </ul>
        );
    }
});

All of the issues should be resolved and the feedback applied in this third and final (hopefully) v1.1.0 RC release. Here's the details of the changes since v1.1.0-rc-2:

• #60, #65: Prefixed React Intl Components with Formatted and Mixin with Intl so they would not shadow built-ins like Number and Date, and be more descriptive when using ES6 destructuring assignments or module imports. The named exports of this package are now:
  • IntlMixin
  • FormattedDate
  • FormattedTime
  • FormattedRelative
  • FormattedNumber
  • FormattedMessage
  • FormattedHTMLMessage
• #65, #66: Changed components to not use nested nested children and make them self-closing instead. Now all of the components use a value prop besides FormattedMessage and FormattedHTMLMessage which use a message prop; e.g., <FormattedNumber value={1000} />
• #26: Added support for React Elements to be passed as prop values when using the FormattedMessage and FormattedHTMLMessage components.
• Fixed source maps for minified files by updating the build process to make sure the source content is actually included in the .map files.
• #59: Fixed issue with Browserify/Webpack bundling for ES3 environments by upgrading all the intl-* dependencies.
• #62: Removed an unnecessary type check from formatNumber() since the underlying Intl.NumberFormat#format() method will never throw.
• #61: Add support for merging per-defined named format options with options specified as props; e.g., this will looked up the format options named "currency" and merge in the option {currency: "USD"}: <FormattedNumber value={99.95} format="currency" currency="USD" />

$ npm install react-intl@next