Material-UI Rating

Installation

Stable channel

npm install material-ui-rating@next

Usage

import Rating from 'material-ui-rating'

<Rating
  value={3}
  max={5}
  onChange={(value) => console.log(`Rated with value ${value}`)}
/>

Material Rating Properties

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.
disableHover	bool	false	Disable hover effects 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.
iconHoveredRenderer	func		Overrides hovered icon renderer.
iconHovered	node		This is the icon to be used as an hovered icon.
iconNormal	node		This is the icon to be used as an normal icon.
iconNormalRenderer	func		Overrides normal icon renderer.
max	number	5	The max value of the rating bar.
onChange	func		Fired when a value is clicked.
readOnly	bool	false	Don't allow input if set to true.
value	number	0	The value of the rating bar.

* required property

CSS API

You can override all the class names injected by Material-UI-Rating thanks to the classes property. This property accepts the following keys:

• root - Applied to the root div element
• iconButton - Applied to the IconButton component
• icon - Applied to the SvgIcon component
• disabled - Applied to the IconButton component when disabled prop is true
• readOnly - Applied to the IconButton component when readOnly prop is true

RTL support

Following Material-UI's conventions, this package respects theme.direction.rtl, so right-to-left support works out-of-the-box.

License

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