Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teamwertarbyte/material-ui-rating
Rate something with style.
https://github.com/teamwertarbyte/material-ui-rating
material-design material-ui rating rating-stars react
Last synced: 1 day ago
JSON representation
Rate something with style.
- Host: GitHub
- URL: https://github.com/teamwertarbyte/material-ui-rating
- Owner: TeamWertarbyte
- License: mit
- Created: 2017-01-27T12:13:45.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-17T21:24:51.000Z (about 2 years ago)
- Last Synced: 2025-01-29T13:06:18.276Z (9 days ago)
- Topics: material-design, material-ui, rating, rating-stars, react
- Language: JavaScript
- Homepage: https://mui.wertarbyte.com/#material-ui-rating
- Size: 766 KB
- Stars: 88
- Watchers: 3
- Forks: 32
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Material-UI Rating
[](https://standardjs.com)
[](https://travis-ci.org/TeamWertarbyte/material-ui-rating)
## Installation
**Stable channel**
```sh
npm install material-ui-rating@next
```
## Usage
```js
import Rating from 'material-ui-rating'
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](https://material-ui.com/guides/right-to-left/), this package respects [`theme.direction.rtl`](https://material-ui.com/customization/default-theme/), so right-to-left support works out-of-the-box.
## License
The files included in this repository are licensed under the MIT license.