ekeric13 / react-ratings-declarative Goto Github PK

Excellent work on this library. It really shows a lot of polish.

A quick example:

<Ratings changeRating={()={}} rating={2.9}>
    <Ratings.Widget />
    ...5x
</Ratings>

(I only add changeRating so that ratings would be selectable.) In this case, moving your mouse over, for instance, the first star over and over causes the third star to appear to wink. Let me know if you would like a video or more information.

It always rounds the partial rating up and for example 3.2 is shown as a 4 full star on safari browser. Works as expected on chrome.

On mouse hover, there is a tooltip that says '{number} Star'
It should be optional

I just tried the rating component and it gives the following error:
Uncaught Error: Cannot find module 'ie-number-polyfill'

The problem is in the following file build/index.js
line 17 require('ie-number-polyfill');
To fix the problem change it to require('./ie-number-polyfill'); because else it thinks it's a module.

In the docs, all the examples use pixels for widgetDimensions and widgetDimension. I am using this library, and liking it alot, but now I need to set the size of the stars according to the width of their container. I tried doing something like this:
<Ratings rating={this.state.rating} widgetDimensions='20%'>
[<Ratings.Widget here]
.

This causes the widgets to line up (not quite) vertically as opposed to horizontally. I believe this is not intended functionality.

Attached is a screenshot of the issue.

I only see the ability to set new star ratings in full stars, it would be really nice to easily set to half or quarter star ratings through hovering and clicking on the location of the star. This is pretty standard with most star rating systems.

Tried both variants: svgs in <Ratings /> and svg in <Ratings.Widget /> - Same result

It renders fine, but all props goes to html tag which is incorrect.

Hello,

this is how I use it:

<Ratings
                                            rating={3.5}
                                            widgetRatedColors="#F7D620"
                                            widgetEmptyColors="#ccc"
                                            widgetDimensions="16px"
                                            widgetSpacings="3px"
                                            changeRating={this.changeRating}
                                            typeOfWidget='Star'
                                        >
                                            <Ratings.Widget  widgetHoverColor="#F7D620"/>
                                            <Ratings.Widget  widgetHoverColor="#F7D620"/>
                                            <Ratings.Widget widgetHoverColor="#F7D620"/>
                                            <Ratings.Widget widgetHoverColor="#F7D620" />
                                            <Ratings.Widget widgetHoverColor="#F7D620"/>
                                        </Ratings>

It gets this inline style and just disappearing. Am I missing something? Thanks

Hi, first of all thank you for this flexible library, it worked nicely for my needs and it is well documented.

I found that I need to be able to pass extra props to Ratings.Widget to make it locatable by our browser automated testing (an "id" at least), and also to provide accessibility attributes.

I opened a PR (#6 ) to allow this and I would be grateful if you could check it.

Thanks!

On the Ratings component starSpacings and on the Widget starSpacing doesn't work but when I looked in the React Dev Tools I found the following widgetSpacings and widgetSpacing when I changed those values it does work. Even when I put them on the component it works. Like this:

<Ratings
  ...
  widgetSpacings="1px"
>

<Ratings.Widget widgetSpacing="1px" />

Long story short changing the API docs from starSpacings and starSpacing to widgetSpacings and widgetSpacing