material-ui-icon-ratings
v1.0.1
Published
A simple solution to displaying and selecting ratings
Downloads
12
Readme
material-ui-icon-ratings
A simple solution to displaying and selecting ratings
Install
npm install --save material-ui-icon-ratings
Usage
import React, { Component } from 'react'
import Rating from 'material-ui-icon-ratings'
export default class App extends Component {
constructor(props){
super(props);
this.state = {
rating: 0
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(rating){
this.setState({
rating
})
}
render () {
return (
<div>
<Rating
onChange={this.handleChange}
iconStyles={{color: 'red', width: '100%'}}
toolTipText={(rating) => { return `You have selected ${rating}`}}
/>
</div>
)
}
}
Properties
| Name |Type |Default |Description |----------------|-------------|------------|-------------------------------- | readOnly | Boolean | false | Used for display purposes only | max | Number | 5 | Number of icons to display | iconStyles | object | {color: '#E5C100', width: '100%'} | Styles Applied to the icon element | initialValue | Number | 0 | The rating initialy displayed | enableToolTip | Boolean | true | Whether to show a tooltip when the selection is made | toolTipText | String or Function | (rating) => { return `Selected Rating: ${rating}` | Either a string or a function. If its a funciton, function receives rating param |iconFull | React.Node | <StarSharp /> | The icon used for the full star |iconEmpty | React.Node | <StarBorderSharp /> | The icon used for the empty star |iconHalfFull | React.Node | <StarHalfSharp /> | The icon use for half star. Half star only appears if the initialValue is a decimal. Selecting half is not supported. Any decimal from between numbers will display as a half star.
Events
|Name |Return Params|Description |----------------|-------------|-------------------------------- |onChange | rating | Fired when a selection is made. Returns selected rating
Contributing
Please submit submit bug in the Issues
tab and pull requests would be very welcome.
License
MIT © jackpilowsky