Skip to content

This fork includes a different render function prop for rendering the empty star icon thus removing the dependency of changing colors on basis of rating.

License

Notifications You must be signed in to change notification settings

kartikbhalla12/react-star-rating-component-new

 
 

Repository files navigation

react-star-rating-component-new

npm version Download Count

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 includes different render function prop for rendering the empty star icon. This removes the dependency of changing colors on basis of rating and displaying different icon altogether. A new prop renderEmptyStarIcon has been added with this package.

Install

npm install react-star-rating-component-new --save

or, if you use yarn:

yarn add react-star-rating-component-new

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 */
  renderEmptyStarIcon={Function(
    nextValue,
    prevValue,
    name
  )} /* it should return string or react component */
  renderStarIconHalf={Function(
    nextValue,
    prevValue,
    name
  )} /* it should return string or react component */
  editing={Boolean} /* is component available for editing, default `true` */
/>

Examples

React

import React from "react";
import ReactDOM from "react-dom";
import StarRatingComponent from "react-star-rating-component-new";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar, faStarHalfAlt } from "@fortawesome/free-solid-svg-icons";
import { faStar as faStarEmpty } from "@fortawesome/free-regular-svg-icons";

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>
        <StarRating
          name="productRating"
          editing={false}
          renderStarIcon={() => (
            <FontAwesomeIcon
              icon={faStar}
              style={{ color: "rgb(253, 186, 73)" }}
            />
          )}
          renderStarIconHalf={() => (
            <FontAwesomeIcon
              icon={faStarHalfAlt}
              style={{ color: "rgb(253, 186, 73)" }}
            />
          )}
          renderEmptyStarIcon={() => (
            <FontAwesomeIcon
              icon={faStarEmpty}
              style={{ color: "rgb(253, 186, 73)" }}
            />
          )}
          starCount={5}
          value={rating}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

MIT Licensed

About

This fork includes a different render function prop for rendering the empty star icon thus removing the dependency of changing colors on basis of rating.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%