Nearly Perfected Mystique

    react-star-rating-component-new

    1.0.6 • Public • Published

    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

    Install

    npm i react-star-rating-component-new

    DownloadsWeekly Downloads

    20

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    5

    Last publish

    Collaborators

    • thedemon12