Package Exports

react-star-ratings

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-star-ratings) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Star Ratings

Customizable react star ratings. SVG stars that show aggregate star ratings to the hundreths decimal point.

Install

npm install --save react-star-ratings

Demo

codepen playground

Demo Example Image

Usage

import StarRatings from './react-star-ratings';

class Foo extends Component {
    changeRating( newRating ) {
      this.setState({
        rating: newRating
      });
    }

    render() {
      // rating = 2;
      return (
        <StarRatings
          rating={rating}
          isSelectable={true}
          isAggregateRating={false}
          changeRating={this.changeRating}
          numOfStars={ 6 }
        />
      );
    }
}


class Bar extends Component {
  render() {
    // aggregateRating = 2.35;
    return (
      <StarRatings
        rating={ aggregateRating }
        isSelectable={ false }
        isAggregateRating={ true }
        numOfStars={ 6 }
      />
    );
  }
}

API

Prop	Type	Default	Description	Example
rating	number	0	The user's rating. Number of stars to highlight.	`3`
numOfStars	number	5	The max number of stars to choose from or to display	`6`
changeRating	function	()=>{}	Callback that will be passed the new rating a user selects	`const setNewRating = (rating) => this.props.dispatch( fooActions.setRating(rating) )`
isSelectable	boolean	false	Determines whether user can select a new rating or whether the stars are just for display	`true`
isAggregateRating	boolean	true	Determines whether stars' will show a fraction of a star (.5 stars)	`false`
starSelectingHoverColor	string	'rgb(230, 67, 47)'	Color of star when hovering over it in selection mode	`yellow`
starRatedColor	string	'rgb(109, 122, 130)'	Color of stars that the user has rated	`black`
starEmptyColor	string	'rgb(203, 211, 227)'	Color of stars that the use hasn't rated	`grey`
starWidthAndHeight	string	'50px'	The width and height of the star	`15px`
starSpacing	string	'7px'	The spacing between the stars	`0`
gradientPathName	string	''	gradientPathname needed if app's path is not at the root	`/app/`
ignoreInlineStyles	boolean	false	ignore all the inline styles and write your own css using the provided classes	`true`

Browser Support

Supports Chrome, firefox, safari, edge, and ie 9+. The star is SVG, so this library fails for any browser that doesn't support svg.

Potential Gradient Path Name Issue

I use the css property fill: 'url(#starGrad<randomNum>)'; to fill in just a percentage of a star. It has some weird bugs depending on the pathname of the app. Normally SPA's have window.location.pathname === '/', but if you append window.location.origin with the pathname of say app, so that window.location.pathname === '/app/', then you need a gradientPathName of '/app/'.

Here is a stackoverflow post that I found that was related to this issue: http://stackoverflow.com/questions/36774188/svg-internal-url-links-and-iframes-on-wirecloud