add support for custom Component prop

README.md

@@ -27,6 +27,7 @@ import Rating from 'material-ui-rating'
 |Name               |Type    |Default|Description                                                                          |
 |-------------------|--------|-------|-------------------------------------------------------------------------------------|
 |classes*           |`object`|       |Useful to extend the style applied to components. The accepted keys are listed below.|
+|component          |`elementType`|`div`|The component used for the root node. Either a string to use a DOM element or a component.|
 |disabled           |`bool`  |`false`|Disables the rating and gray it out if set to true.                                  |
 |iconFilled         |`node`  |       |This is the icon to be used as an icon in value range.                               |
 |iconFilledRenderer |`func`  |       |Overrides filled icon renderer.                                                      |

src/components/Rating/Rating.js

@@ -103,7 +103,7 @@ class Rating extends Component {
   }
 
   render () {
-    const { classes, max, disabled, readOnly, value, onChange } = this.props
+    const { component: Component, classes, max, disabled, readOnly, value, onChange } = this.props
     const rating = []
 
     for (let i = 1; i <= max; i++) {
@@ -131,11 +131,12 @@ class Rating extends Component {
       )
     }
 
-    return (<div className={classes.root}>{rating}</div>)
+    return (<Component className={classes.root}>{rating}</Component>)
   }
 }
 
 Rating.defaultProps = {
+  component: 'div',
   disabled: false,
   max: 5,
   readOnly: false,
@@ -148,6 +149,8 @@ Rating.defaultProps = {
 Rating.propTypes = {
   /** Useful to extend the style applied to components. See the repository README for the accepted keys. */
   classes: PropTypes.object.isRequired,
+  /** The component used for the root node. Either a string to use a DOM element or a component. */
+  component: PropTypes.elementType,
   /** Disables the rating and gray it out if set to true. */
   disabled: PropTypes.bool,
   /** This is the icon to be used as an icon in value range. */

stories/index.js

@@ -59,3 +59,4 @@ storiesOf('Rating', module)
       </div>
     )
   })
+  .add('with custom component', () => <Rating Component='span' onChange={action('onChange')} />)