ReactJs Rating Stars Component / Example / Demo / Sourcecode Download

const Rating = React.createClass({ displayName: "Rating",
  getInitialState: function () {
    const stars = this.props.stars;
 
    return {
      value: stars,
      dynamicValue: stars };
 
  },
 
  handleClick: function (newValue) {
    this.setState({
      value: newValue,
      dynamicValue: newValue });
 
 
    if (this.props.onRated) {
      this.props.onRated(newValue);
    }
  },
 
  handleMouseEnter: function (newValue) {
    this.setState({ dynamicValue: newValue });
  },
 
  handleMouseLeave: function (newValue) {
    this.setState({ dynamicValue: this.state.value });
  },
 
  render: function () {
    const starSpans = [];
 
    for (let v = 1; v <= 5; v++) {if (window.CP.shouldStopExecution(0)) break;
      if (v <= this.state.dynamicValue) {
        starSpans.push( /*#__PURE__*/
        React.createElement("span", {
          key: v,
          className: "star",
          onMouseEnter: this.handleMouseEnter.bind(this, v),
          onMouseLeave: this.handleMouseLeave.bind(this, v),
          onClick: this.handleClick.bind(this, v) }, "\u2605"));
 
 
 
 
      } else {
        starSpans.push( /*#__PURE__*/
        React.createElement("span", {
          key: v,
          className: "star",
          onMouseEnter: this.handleMouseEnter.bind(this, v),
          onMouseLeave: this.handleMouseLeave.bind(this, v),
          onClick: this.handleClick.bind(this, v) }, "\u2606"));
 
 
 
 
      }
    }window.CP.exitedLoop(0);
 
    return /*#__PURE__*/React.createElement("div", null, starSpans);
  } });
 
 
function handleRated(newRating) {
  console.log(`The new rating is: ${newRating}`);
}
 
ReactDOM.render( /*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/
React.createElement(Rating, { stars: 1, onRated: handleRated }), /*#__PURE__*/
React.createElement(Rating, { stars: 2 }), /*#__PURE__*/
React.createElement(Rating, { stars: 3 }), /*#__PURE__*/
React.createElement(Rating, { stars: 4 }), /*#__PURE__*/
React.createElement(Rating, { stars: 5 })),
 
document.getElementById('container'));