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=FunctionnextValue prevValue name /* on icon click handler */ onStarHover=FunctionnextValue prevValue name /* on icon hover handler */ onStarHoverOut=FunctionnextValue prevValue name /* on icon hover out handler */ renderStarIcon=FunctionnextValue prevValue name /* it should return string or react component */ renderStarIconHalf=FunctionnextValue 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
;;; Component { super; thisstate = rating: 1 ; } { this; } { const rating = thisstate; return <div> <h2>Rating from state: rating</h2> <StarRatingComponent name="rate1" starCount=10 value=rating onStarClick=thisonStarClick /> </div> ; } ReactDOM;
Non-editable (with custom icons)
;;; Component { const rating = thisstate; return <div> <h2>Rating from state: rating</h2> <StarRatingComponent name="rate2" editing=false renderStarIcon= <span></span> starCount=10 value=8 /> </div> ; } ReactDOM;
Check more in examples folder.
MIT Licensed