react-flex-rating
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:
;
(haven't figured out how to spit out compiled css using nwb-components yet)
Add the component into your app somewhere:
// Inside React component render():<Rating ... className: `html-entities-rating` value: rating allowHalfs maxValue disabled iconCount: starCount activeIcon: <span>★</span> // https://www.toptal.com/designers/htmlarrows/symbols/black-star/ inactiveIcon: <span>☆</span> // https://www.toptal.com/designers/htmlarrows/symbols/white-star/ this />
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 theonSelect
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.