Skip to content

Latest commit

 

History

History
122 lines (94 loc) · 5.28 KB

README.md

File metadata and controls

122 lines (94 loc) · 5.28 KB
Raw

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

Prop Type Default Description Example
rating number 0 The user's rating. Number of widgets to highlight. 3
typeOfWidget string 'Star' The type of widget used as a rating meter Point
changeRating function ()=>{} Callback that will be passed the new rating a user selects const setNewRating = (rating) => this.props.dispatch( fooActions.setRating(rating) )
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
svgIconPaths string 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' Set a path that describes the svg shape for all the children 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'
svgIconViewBoxes string '0 0 51 48' Set the view box for a custom svg path you might have for all the children '0 0 51 48'
svgs node none Use a custom svg or react element for all the children <svg><circle /></svg>
widgetRatedColors string 'rgb(109, 122, 130)' Color of widgets that the user has rated, applied to all the children black
widgetEmptyColors string 'rgb(203, 211, 227)' Color of widgets that the use hasn't rated, applied to all the children grey
widgetHoverColors string 'rgb(230, 67, 47)' Color of widget when hovering over it in selection mode, applied to all the children yellow
widgetDimensions string '50px' The width and height of the star, applied to all the children 15px
widgetSpacings string '7px' The spacing between the widgets, applied to all the children 0

Widget

Prop Type Default Description Example
svgIconPath string 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' Set a path that describes the svg shape 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'
svgIconViewBox string '0 0 51 48' Set the view box for a custom svg path you might have '0 0 51 48'
svg node none Use a custom svg or react element <svg><circle /></svg>
widgetRatedColor string 'rgb(109, 122, 130)' Color of widgets that the user has rated black
widgetEmptyColor string 'rgb(203, 211, 227)' Color of widgets that the use hasn't rated grey
widgetHoverColor string 'rgb(230, 67, 47)' Color of star when hovering over it in selection mode yellow
widgetDimension string '50px' The width and height of the widget 15px
widgetSpacing string '7px' The spacing between the widgets 0

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/.