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:

@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'

// Inside React component render():
<Rating {...{
  className: `html-entities-rating`,
  value: rating,
  allowHalfs,
  maxValue,
  disabled,
  iconCount: starCount,
  activeIcon: <span>&#9733;</span>, // https://www.toptal.com/designers/htmlarrows/symbols/black-star/
  inactiveIcon: <span>&#9734;</span>, // https://www.toptal.com/designers/htmlarrows/symbols/white-star/
  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.