Number/Date/Mixin components exposed as IntlNumber/IntlDate/IntlMixin

[pselden]

This is a feature request to export the Number/Date/Mixin components as IntlNumber/IntlDate/Mixin.

I love using the ES6 object destructuring syntax, but when I'm consuming react-intl components I cannot use it because it would "hide" the built in Number/Date types. Mixin is slightly different in that there is no conflict -- I just always rename it to IntlMixin to make it a bit more clear about it's use.

I'd love to be able to do the following.

var { IntlNumber, IntlDate, IntlMixin } = require('react-intl');

Instead of

var ReactIntl = require('react-intl'),
  IntlNumber = ReactIntl.Number,
  IntlDate = ReactIntl.Date,
  IntlMixin = ReactIntl.Mixin;

And if you end up going this route, I'd probably prefix the other ones with Intl for consistency.

[ericf]

Yeah, I've run into this too and agree it's not good. In terms of ES5 compatible syntax, ReactIntl.Number looks better than ReactIntl.IntlNumber, but I'm on board with focusing on the future and assuming ES6 modules will prevail in the long term. The problem is ES6 modules also support the "namespacing" approach of ReactIntl.*.

Currently you can do this, but dot-notation in the JSX looks odd:

var ReactIntl = require('react-intl');

<ReactIntl.Number>{1000}</ReactIntlNumber>

As for ES6 module instance you can also do:

import {Number as IntlNumber} from 'react-intl';

or…

import * as ReactIntl from 'react-intl';

[ericf]

@caridy any thoughts on this?

[caridy]

🍹