Interative & customizable star rater.


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

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


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

All attributes are optional.

  • total: Number, default 5
  • rating: Number, default 0
  • interactive: Boolean, default true. Create a read-only rater by setting this attribute to false.
  • onRate: function({ rating }). Callback to retrieve rating value. Called after rated.
  • onRating: function({ rating }). Callback to retrieve rating value. Called during rating (mouse moving between stars).
  • onCancelRate: function({ rating }). Called when mouse moves out from rater.

From version 5.0.0, callback is split into onRate & onRating & onCancelRate. onRate is called when mouse click, while onRating is called when mouse moves between star components and onCancelRate is called when mouse leaves rater. Usually you only need onRate.

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)


onRate & onRating

(rating is passed with the React's SyntheticEvent)

  rating: Number


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.

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

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

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:

Abilu judge system for Douban Muisc