Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ekeric13/react-ratings-declarative

A customizable rating component for selecting x widgets or visualizing x widgets
https://github.com/ekeric13/react-ratings-declarative

component declarative icons input rater rating react react-component react-declarative react-ratings star-rating svg svg-icons

Last synced: about 2 months ago
JSON representation

A customizable rating component for selecting x widgets or visualizing x widgets

Host: GitHub
URL: https://github.com/ekeric13/react-ratings-declarative
Owner: ekeric13
License: bsd-3-clause
Created: 2018-02-02T01:12:27.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2020-01-02T11:19:07.000Z (about 5 years ago)
Last Synced: 2024-11-11T18:48:44.316Z (2 months ago)
Topics: component, declarative, icons, input, rater, rating, react, react-component, react-declarative, react-ratings, star-rating, svg, svg-icons
Language: JavaScript
Homepage: https://codepen.io/ekeric13/project/full/DkJYpA/
Size: 650 KB
Stars: 44
Watchers: 1
Forks: 10
Open Issues: 9
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 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](https://www.npmjs.com/package/react-ratings-declarative)

```shell

npm install --save react-ratings-declarative

```

## Demo

### [codepen playground](https://codepen.io/ekeric13/project/full/DkJYpA/)

### Demo Example Image

![](http://i.imgur.com/5CwWVam.png)

## Usage

```js

import Ratings from 'react-ratings-declarative';

class Foo extends Component {

    changeRating( newRating ) {

      this.setState({

        rating: newRating

      });

    }

    render() {

      return (

          

            

            

            

            

            

          

      );

    }

}

class Bar extends Component {

  render() {

    return (

      

        

        

        

        

        

      

    );

  }

}

```

## 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 | `` |

| 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 | `` |

| 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)';` 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/`.