baptistemz/react-rater

⭐️ Interative & customizable star rater

React-rater

Star rater

Live demo

Install

npm install react-rater

import Rater from 'react-rater'
import 'react-rater/lib/react-rater.css'

// ...
render() {
  return (<Rater total={5} rating={2} />)
}

API

<Rater total={} rating={} onRate={} interactive={} />

All attributes are optional.

• total: default 5
• rating: default 0
• onRate: function(). Callback to retrieve rating value.
• interactive: default true. Create a read-only rater by setting this attribute to false.

Read-only mode

Set interactive={false} to create a read-only rater.

In read-only mode, rating could contain a fractional part like 3.6. (Thanks to @devmtnaing)

Callback

onRate is called on mousemove/mouseenter/click/mouseleave.

For mousemove/mouseenter/mouseleave, the structure of argument is:

(rating is passed with the React's SyntheticEvent)

{
  rating: Number
  ...syntheticEvent
}

Styling

The CSS way

$react-rater-link: #ccc !default;   // color of star not rated
$react-rater-hover: #666 !default;  // color of star on hover
$react-rater-active: #000 !default; // color of star rated

The JS way

<Rater /> will repeat its children until counts reach total. https://github.com/NdYAG/react-rater/blob/master/src/index.js#L69

In this way you can define your own 'star' component (src/star.js).

<Rater total={5}>
  <Heart />
</Rater>

and style it based on these props:

{
  isActive: PropTypes.bool,
  isActiveHalf: PropTypes.bool,
  willBeActive: PropTypes.bool,
  isDisabled: PropTypes.bool
}

Real world example

Valentine's Day:

Abilu judge system for Douban Music:

License

BSD.