react-star-rating-controlled-component
This is a fork of Dmitri Voronianski's react-star-rating-component, a "Tiny React.js component for star (or any other icon based) ratings."
This version is updated to be fully controlled, i.e. it does not maintain state internally and just renders its props. This makes it easy to operate with React-Redux.
With this change, the componentWillMount function has been removed. componentWillMount will no longer be supported with React 17. And lastly, the packages in package.json have been brought up to date.
Install
npm install react-star-rating-controlled-component --save
or, if you use yarn:
yarn add react-star-rating-controlled-component
Demo Here
Props
<StarRatingComponent name=String /* name of the radio input, it is required */ value=Number /* number of selected icon (`0` - none, `1` - first). *Also required* */ 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
React-Redux
const SET_RATING_ACTION = 'SET_RATING_ACTION' const reducer = { } const preloadedState = rating: 3 const store = const createSetRatingAction = type: SET_RATING_ACTION rating: rating const Component = <div style= marginLeft: 20 > <h3>React-Redux:</h3> <div style= fontSize: 24 > <StarRatingComponent name="reduxStarRating" value=propsrating onStarClick=propscreateSetRatingAction /> </div> </div> const mapStateToProps = rating: staterating const Container = Component ReactDOM
React only
;;; Component { super; thisstate = rating: 1 ; } { this; } { const rating = thisstate; return <div> <h2>Rating from state: thisstaterating</h2> <StarRatingComponent name="rate1" starCount=10 value=rating onStarClick=thisonStarClick /> </div> ; } ReactDOM;
More in examples folder.
MIT Licensed