React Ratings Declarative

A customizable rating component for selecting x widgets or visualizing x widgets. SVG stars that show aggregate star ratings to the hundreths decimal point.

Install

npm install --save react-ratings-declarative

Demo

codepen playground

Demo Example Image

Usage

import Ratings from 'react-ratings-declarative';

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

    render() {
      return (
          <Ratings
            rating={this.state.rating}
            widgetRatedColors="blue"
            changeRating={this.changeRating}
          >
            <Ratings.Widget />
            <Ratings.Widget />
            <Ratings.Widget
              widgetDimension="60px"
              svgIconViewBox="0 0 5 5"
              svgIconPath="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
            />
            <Ratings.Widget widgetHoverColor="black" />
            <Ratings.Widget />
          </Ratings>
      );
    }
}


class Bar extends Component {
  render() {
    return (
      <Ratings
        rating={3.403}
        widgetDimensions="40px"
        widgetSpacings="15px"
      >
        <Ratings.Widget widgetRatedColor="green" />
        <Ratings.Widget widgetSpacing="30px" widgetDimension="15px" />
        <Ratings.Widget widgetRatedColor="black" />
        <Ratings.Widget widgetRatedColor="rebeccapurple" />
        <Ratings.Widget />
      </Ratings>
    );
  }
}

API

Ratings

Widget

Browser Support

Supports Chrome, safari, firefox, edge, and ie 9+. The widget 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

Contribute

If you want to contribute: Make changes in the src folder. And then run make build. The make build command compiles react and es6 stuff using babel from src/ into build/.