Currency dropping trailing zero in decimal

[formatjs]

Currency dropping trailing zero in decimal

[ericf]

@andrewholt was this in a particular browser, or all browsers that you noticed this?

Also, we've been working on creating a setup of React Components for v1.1.0 which we just did an RC1 release for. These include an HTML Message component to handle your use case here. https://github.com/yahoo/react-intl/releases/tag/v1.1.0-rc-1

[andrewholt]

@ericf Indeed, this does work as expected in Safari (will display as $35.50). Although, in Safari, $10 will display as $10.00, and Chrome will show only $10, which seems more desirable.

We have already moved to using the HTML Message (thanks for that), but this issue still persists (presumably since it's an issue with the Intl object in Chrome, and the polyfill for Safari is working properly?).

[ericf]

Yes this is an issue with Chrome. I'll check to make sure there's a bug open for their implementation of Intl.NumberFormat.

I checked Firefox and it formats 35.50 --> "$35.50" and 10 --> "$10.00" like the Intl.js polyfill does.

[andrewholt]

Great, thanks so much. I'll close this out since it's not an issue with react-intl.

Thanks again!

[ericf]

@andrewholt just a note on a workaround until Chrome fixes this, you can specify a value for minimumFractionDigits and set it to 0 if you want all env to render like Chrome, or 2 if you want to show cents. I would recommend using a named format for this so it's easier, e.g.:

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

    render: function () {
        return <ReactIntl.Number format="USD">{100}</ReactIntl.Number>;
    }
});

var intlData = {
    locales: 'en-US',
    formats: {
        number: {
            USD: {
                style: 'currency',
                currency: 'USD',
                minimumFractionDigits: 2
            }
        }
    }
};

React.render(
    <Component {...intlData} />,
    document.getElementById('example')
);