Skip to content

TeamWertarbyte/material-ui-rating

Repository files navigation

Material-UI Rating

JavaScript Style Guide Build Status

Example

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.