A star rater in react.js

Downloads in past


6.0.5a year ago9 years agoMinified + gzip package size for react-rater in KB


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 react-rater@5


<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