react-star-rating-controlled-component

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