Awesome Open Source
Awesome Open Source


Star rater Build Status

Check out our new demo!


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

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

Note: If your react version is under 16.8.0 without hooks support, please keep using [email protected]


<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



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,160,380
Reactjs (175,698
Rating (13,790
Mouse (6,807
React Component (6,355
Rater (7
Star Rater (3