react-flex-rating
![npm version](https://img.shields.io/npm/v/react-flex-rating.svg)
A (semi)full-featured React rating component.
- Built w/ functional components
- Dynamic rating-icon count, value, maximum
- Allows for half-icon ratings
- Intuitive over-states (i.e. both currently active icons and non-active icons will react to hover)
- Built w/ SASS for easy, flexible, overriding of styles
- Allows for propagation of custom
className
property - Plays nice w/ material-ui 1.4.x
Check out the demo here! https://ravenhurst.github.io/react-flex-rating/
Installation
yarn add react-flex-rating
In your sass-enabled React app include this component's .scss:
@import "~react-flex-rating/lib/styles/index.scss";
(haven't figured out how to spit out compiled css using nwb-components yet)
Add the component into your app somewhere:
import Rating from 'react-flex-rating'
<Rating {...{
className: `html-entities-rating`,
value: rating,
allowHalfs,
maxValue,
disabled,
iconCount: starCount,
activeIcon: <span>★</span>,
inactiveIcon: <span>☆</span>,
onSelect: rating => this.setState({ rating })
}} />
Component Properties:
value
(Number): Current value of the component. Used to drive the rendering of "active" icons. This is passed into the firrst argument of the onSelect
callback method.allowHalfs
(Boolean): Allows for toggling between whole and half-icon selections.maxValue
(Number): Maximum value that full icon selection will indicate.disabled
(Boolean): Disables interaction w/ the component and sets appropriate classes for styling.iconCount
(Number): Number of icons to render.activeIcon
(ReactElement): Element to render in "active" state.inactiveIcon
(ReactElement): Element to render in "inactive" state.onSelect
(Function): Function that is called whenever a new rating value is selected.