react-star-rating-controlled-component
v1.0.1
Published
React component for star (or any other icon based) ratings
Downloads
1,212
Maintainers
Readme
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={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
React-Redux
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { connect, Provider } from 'react-redux'
import StarRatingComponent from '../'
const SET_RATING_ACTION = 'SET_RATING_ACTION'
const reducer = (state, action) => {
switch (action.type) {
case SET_RATING_ACTION:
return { ...state, rating: action.rating }
default:
return state
}
}
const preloadedState = { rating: 3 }
const store = createStore(reducer, preloadedState)
const createSetRatingAction = rating => ({ type: SET_RATING_ACTION, rating: rating })
const Component = props =>
<div style={{ marginLeft: 20 }}>
<h3>React-Redux:</h3>
<div style={{ fontSize: 24 }}>
<StarRatingComponent name="reduxStarRating" value={props.rating} onStarClick={props.createSetRatingAction} />
</div>
</div>
const mapStateToProps = state => ({ rating: state.rating })
const Container = connect(mapStateToProps, { createSetRatingAction })(Component)
ReactDOM.render(
<Provider store={store}>
<Container />
</Provider>
, document.getElementById('redux-app')
)
React only
import React from 'react';
import ReactDOM from 'react-dom';
import StarRatingComponent from 'react-star-rating-controlled-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: {this.state.rating}</h2>
<StarRatingComponent
name="rate1"
starCount={10}
value={rating}
onStarClick={this.onStarClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
More in examples folder.
MIT Licensed