react-star-rating-component
Tiny React.js component for star (or any other icon based) ratings.
Install
npm install react-star-rating-component --save
Demo
Props
<StarRatingComponent
name={String} /* name of the radio input, it is required */
value={Number} /* number of selected icon (`0` - none, `1` - first) */
starCount={Number} /* number of icons in rating, default `5` */
onStarClick={Function(nextValue, prevValue, name)} /* on icon click handler */
onStarHover={Function(nextValue, prevValue, name)} /* on icon hover handler */
onStarHoverOut={Function(nextValue, prevValue, name)} /* on icon hover out handler */
renderStarIcon={Function(nextValue, prevValue, name)} /* it should return string or react component */
renderStarIconHalf={Function(nextValue, prevValue, name)} /* it should return string or react component */
starColor={String} /* color of selected icons, default `#ffb400` */
emptyStarColor={String} /* color of non-selected icons, default `#333` */
editing={Boolean} /* is component available for editing, default `true` */
/>
Examples
Editable
import React from 'react';
import ReactDOM from 'react-dom';
import StarRatingComponent from 'react-star-rating-component';
class App extends React.Component {
constructor() {
super();
this.state = {
rating: 1
};
}
onStarClick(nextValue, prevValue, name) {
this.setState({rating: nextValue});
}
render() {
const { rating } = this.state;
return (
<div>
<h2>Rating from state: {rating}</h2>
<StarRatingComponent
name="rate1"
starCount={10}
value={rating}
onStarClick={this.onStarClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Non-editable (with custom icons)
import React from 'react';
import ReactDOM from 'react-dom';
import StarRatingComponent from 'react-star-rating-component';
class App extends React.Component {
render() {
const { rating } = this.state;
return (
<div>
<h2>Rating from state: {rating}</h2>
<StarRatingComponent
name="rate2"
editing={false}
renderStarIcon={() => <span></span>}
starCount={10}
value={8}
/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Check more in examples folder.
MIT Licensed