Also added props tagName and tagProps for components FormattedDate, FormattedTime, FormattedRelative, FormattedPlural and FormattedNumber.

Example of FormattedNumber component working:

```
                                    <FormattedNumber
                                        tagName={Text}
                                        value={4.344554} />
```

Author: gerbenupinion

src/components/date.js

@@ -4,7 +4,7 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+import {Component, PropTypes, createElement} from 'react';
 import {intlShape, dateTimeFormatPropTypes} from '../types';
 import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
@@ -20,15 +20,20 @@ export default class FormattedDate extends Component {
 
     render() {
         const {formatDate}      = this.context.intl;
-        const {value, children} = this.props;
+        const {value,
+            children,
+            tagName,
+            tagProps,
+        } = this.props;
 
         let formattedDate = formatDate(value, this.props);
 
         if (typeof children === 'function') {
             return children(formattedDate);
         }
 
-        return <span>{formattedDate}</span>;
+        return createElement(tagName, tagProps, formattedDate);
+
     }
 }
 
@@ -40,7 +45,17 @@ FormattedDate.contextTypes = {
 
 FormattedDate.propTypes = {
     ...dateTimeFormatPropTypes,
-    value   : PropTypes.any.isRequired,
-    format  : PropTypes.string,
     children: PropTypes.func,
+    format  : PropTypes.string,
+    tagName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+    ]),
+    tagProps: PropTypes.object,
+    value   : PropTypes.any.isRequired,
+};
+
+FormattedDate.defaultProps = {
+    tagName: 'span',
+    tagProps: null,
 };

src/components/message.js

@@ -110,9 +110,9 @@ FormattedMessage.propTypes = {
     ...messageDescriptorPropTypes,
     values  : PropTypes.object,
     tagName: PropTypes.oneOfType([
-         PropTypes.string,
-         PropTypes.func
-     ]),
+        PropTypes.string,
+        PropTypes.func,
+    ]),
     tagProps: PropTypes.object,
     children: PropTypes.func,
 };

src/components/number.js

@@ -4,7 +4,7 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+import {Component, PropTypes, createElement} from 'react';
 import {intlShape, numberFormatPropTypes} from '../types';
 import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
@@ -20,15 +20,20 @@ export default class FormattedNumber extends Component {
 
     render() {
         const {formatNumber}    = this.context.intl;
-        const {value, children} = this.props;
+        const {value,
+            children,
+            tagName,
+            tagProps,
+            } = this.props;
 
         let formattedNumber = formatNumber(value, this.props);
 
         if (typeof children === 'function') {
             return children(formattedNumber);
         }
 
-        return <span>{formattedNumber}</span>;
+        return createElement(tagName, tagProps, formattedNumber);
+
     }
 }
 
@@ -42,5 +47,15 @@ FormattedNumber.propTypes = {
     ...numberFormatPropTypes,
     value   : PropTypes.any.isRequired,
     format  : PropTypes.string,
+    tagName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+    ]),
+    tagProps: PropTypes.object,
     children: PropTypes.func,
 };
+
+FormattedNumber.defaultProps = {
+    tagName: 'span',
+    tagProps: null,
+};

src/components/plural.js

@@ -4,7 +4,7 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+import {Component, PropTypes, createElement} from 'react';
 import {intlShape, pluralFormatPropTypes} from '../types';
 import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
@@ -20,7 +20,12 @@ export default class FormattedPlural extends Component {
 
     render() {
         const {formatPlural}           = this.context.intl;
-        const {value, other, children} = this.props;
+        const {value,
+            other,
+            children,
+            tagName,
+            tagProps,
+        } = this.props;
 
         let pluralCategory  = formatPlural(value, this.props);
         let formattedPlural = this.props[pluralCategory] || other;
@@ -29,7 +34,8 @@ export default class FormattedPlural extends Component {
             return children(formattedPlural);
         }
 
-        return <span>{formattedPlural}</span>;
+        return createElement(tagName, tagProps, formattedPlural);
+
     }
 }
 
@@ -50,9 +56,17 @@ FormattedPlural.propTypes = {
     few  : PropTypes.node,
     many : PropTypes.node,
 
+    tagName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+    ]),
+    tagProps: PropTypes.object,
+
     children: PropTypes.func,
 };
 
 FormattedPlural.defaultProps = {
     style: 'cardinal',
+    tagName: 'span',
+    tagProps: null,
 };

src/components/relative.js

@@ -4,7 +4,7 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+import {Component, PropTypes, createElement} from 'react';
 import {intlShape, relativeFormatPropTypes} from '../types';
 import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
@@ -109,7 +109,11 @@ export default class FormattedRelative extends Component {
 
     render() {
         const {formatRelative}  = this.context.intl;
-        const {value, children} = this.props;
+        const {value,
+            children,
+            tagName,
+            tagProps,
+        } = this.props;
 
         let formattedRelative = formatRelative(value, {
             ...this.props,
@@ -120,7 +124,7 @@ export default class FormattedRelative extends Component {
             return children(formattedRelative);
         }
 
-        return <span>{formattedRelative}</span>;
+        return createElement(tagName, tagProps, formattedRelative);
     }
 }
 
@@ -136,9 +140,16 @@ FormattedRelative.propTypes = {
     format        : PropTypes.string,
     updateInterval: PropTypes.number,
     initialNow    : PropTypes.any,
+    tagName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+    ]),
+    tagProps: PropTypes.object,
     children      : PropTypes.func,
 };
 
 FormattedRelative.defaultProps = {
+    tagName: 'span',
+    tagProps: null,
     updateInterval: 1000 * 10,
 };

src/components/time.js

@@ -4,7 +4,7 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+import {Component, PropTypes, createElement} from 'react';
 import {intlShape, dateTimeFormatPropTypes} from '../types';
 import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
@@ -20,15 +20,19 @@ export default class FormattedTime extends Component {
 
     render() {
         const {formatTime}      = this.context.intl;
-        const {value, children} = this.props;
+        const {value,
+            children,
+            tagName,
+            tagProps,
+            } = this.props;
 
         let formattedTime = formatTime(value, this.props);
 
         if (typeof children === 'function') {
             return children(formattedTime);
         }
 
-        return <span>{formattedTime}</span>;
+        return createElement(tagName, tagProps, formattedTime);
     }
 }
 
@@ -41,6 +45,16 @@ FormattedTime.contextTypes = {
 FormattedTime.propTypes = {
     ...dateTimeFormatPropTypes,
     value   : PropTypes.any.isRequired,
+    tagName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+    ]),
+    tagProps: PropTypes.object,
     format  : PropTypes.string,
     children: PropTypes.func,
 };
+
+FormattedTime.defaultProps = {
+    tagName: 'span',
+    tagProps: null,
+};