Rate something with material ui style

Material-UI Rating

Rate something with material ui style.

Installation

Stable channel

npm install material-ui-rating

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.
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.
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

GitHub