material-ui-star-rating

Material Rating

See this component in action

Installation

npm i --save material-ui-rating

Usage

import { Rating } from 'material-ui-rating'
 
// ...
render() {
  return(
    <div>
        <Rating
          value={3}
          max={5}
          onChange={(value) => console.log(`Rated with value ${value}`)}
        />
    </div>
  )
}

Material Rating Properties

Name	Type	Default	Description
className	string		Sets classname for IconButton component.
disabled	boolean	false	Disables the rating and gray it out if set to true.
iconClassName	string		Sets classname for icon in IconButton Component.
iconFilled	node	<ToggleStar color={colors.orange500}/>	This is the icon to be used as an icon in value range.
iconFilledRenderer	func		Overrides filled icon renderer.
iconHovered	node	<ToggleStarBorder color={colors.orange500}/>	This is the icon to be used as an hovered icon.
iconHoveredRenderer	func		Overrides hovered icon renderer.
itemIconStyle	object		Override the inline-icon-styles of the item elements.
iconNormal	node	<ToggleStarBorder color={colors.grey300}/>	This is the icon to be used as an normal icon.
iconNormalRenderer	func		Overrides normal icon renderer.
itemStyle	object		Override the inline-styles of the item elements.
max	number	5	The max value of the rating bar.
onChange	function		Fired when a value is clicked.
readOnly	boolean	false	Don't allow input if set to true.
style	object		Override the inline-styles of the root element.
tooltip	node		Sets tooltip for icon in IconButton Component.
tooltipPosition	string	bottom-center	Overrides tooltip position.
tooltipRenderer	func		Overrides tooltip renderer.
tooltipStyles	object		Overrides tooltip styles.
value	number	0	The value of the rating bar.

* required property

License

The files included in this repository are licensed under the MIT license.