Awesome Open Source
Awesome Open Source

React-rater

Star rater Build Status

Check out our new 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} />)
}

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

API

<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)

Callback

onRate & onRating

(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:

Valentine

Abilu judge system for Douban Music:

Abilu judge system for Douban Muisc

License

BSD.


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