React-rater

Star rater

Live demo

install

npm install react-rater

import Rater from 'react-rater'

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

API

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

All attributes are optional.

• total: default 5
• rating: default 0
• limit: default same as total. Sets the maximum rating value available.
• onRate: function(rating, lastRating). Callback to retrieve rating value.
• interactive: default true. Create a read-only rater by setting this attribute to false.

Notice: onRate is called on mousemove/mouseenter/click/mouseleave. Only for click lastRating has a value.

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 (remember to check out src/star.js).

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

Real world example

Valentine's Day:

Abilu judge system for Douban Music:

License

BSD.