Hello, I'm rendering React 16 on client and server(SSR) with new function React.hydrate(). And console throw Warning message:
Warning: Prop id did not match. Server: "starGrad239537257264089" Client: "starGrad357747279155326"

This is the only problem with this component. Thank's a lot!

I pretty much took the example provided in the package and put it in one of my components. The changeRating prop is not executed when i click on any of the stars.

I'm using React 16.2 and react-star-ratings 2.2.0

Here is my changeRating method:

changeRating(newRating) {
    this.setState({
        rating: newRating
    });
}

And here is how i render the component:

<StarRatings
    rating={this.state.rating}
    starRatedColor="blue"
    changeRating={this.changeRating}
    numberOfStars={6}
/>

If i edit the state myself the stars get updated and otherwise the component works as expected. The issue is that this.changeRating never gets called.

Help!

the star viewed in chrome very well :

but in firefox 57.0.1 displayed very big :

Is there a way to disable the rating, just for the view? I noticed that there was a flag (isSelectable) in the previous version of the API, but that's not the case for the API v2. Is there another way of disabling this and why is this feature removed anyway? it's kind of helpful.

Currently this library provides a change function that's triggered every time a star is changed.

However, many of my users invariably end up gliding their finger across the stars when inputting a rating, thus triggering several change events.

It would be great if this library supported an afterChangeRating function.

This function would return the current rating when the user releases their finger from the component, similar to an onMouseUp() event.

There's a good example of how this works in the react-slider library.

Once you import the component by using ./ the app will try to get the component from you local folder instead node_modules folder.

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

Just to avoid an initial error when someone cope and past the usage example like me.

Thanks for the nice component.

Does this really not implement className prop? Seems counterintuitive.

It would be nice to be able to set this prop using the API (component):
typeOfWidget: 'Star', line 197 star-ratings.js

If you are using a different icon like hearts or other it would be nice to change this string for the title (hover).

// react-star-ratings.d.ts

import * as React from 'react';

declare namespace StarRatings {
  interface Props {
    rating?: number;
    numberOfStars?: number;
    changeRating?: void;
    starRatedColor?: string;
    starEmptyColor?: string;
    starHoverColor?: string;
    starDimension?: string;
    starSpacing?: string;
    gradientPathName?: string;
    ignoreInlineStyles?: boolean;
    svgIconPath?: string;
    svgIconViewBox?: string;
    name?: string;
  }
}
declare class StarRatings extends React.Component<StarRatings.Props, {}> {
  
}
export default StarRatings;

for who needs

I'm using the StarRating Component in a form and for some reason the user cannot select a half star. I have added the isAggregateRating to true in the props. Please help.

<StarRatings
  numberOfStars={numberOfStars}
  starHoverColor="chocolate"
  starRatedColor="orange"
  isAggregateRating={true}
  rating={0}
  changeRating={val => onChange(val)}
/>

Working fine on Chrome but on Mozilla Starts are not accepting width and height
On Mozilla:

On Chrome:

My code:

<div className="testiCard-user-reviews-grid__rating-name-wrap">
     <StarRatings
       rating={data.stars}
       starDimension="25"
       starSpacing="2px"
       starRatedColor="var(--h-primary)"
       />
      <p className="testiCard-user-reviews-grid__name">{data.name}</p>
</div>

any idea?

Hey, sorry, couldn't find info about either this or react-ratings-declarative would work with React Native at all?

Cheers

the starRatedColor option is not working wheter i put in starRatedColor='rgb(109, 122, 130)' or starRatedColor='black'. Is there any known bugs? Using 2.3

Hi, I would really appreciate the option for disabling the option to hover.
The color change in the star ratings while hovered can limit the use in mobile phones or touch users.

Thanks

is possible to change color star with gradient color?

Hello, first thanks a lot for this great rating component !

I'm trying to find a way to provide a stroke to the star's svg path (see picture below), do you have any idea ?

If nothing allows me to do so, maybe could we add an object svgAttributes that could be destructurated in the svg or even these props:

• starRatedStroke
• starEmptyStroke
• starHoverStroke

Thanks!

In docs say that supports IE9+, but IE not support fill() method.

With SSR this line cause a warning.

Is anyone having problems installing the package?
I am getting Module not found: Can't resolve './react-star-ratings'....
I cleared and reinstalled node modules.

using yarn 1.22.5

I am using this package to display ratings given by users. It works with all browsers except Safari.
On other browsers it works fine, you can check this screenshot: https://nimb.ws/DbW3B8
But on Safari browser, the half star comes in black colour.

Please suggest how to get rid of this?

I think that it's better to provide a function to format tooltip such as '10 point's instead of '1 stars',
'20 points' instead of '2 stars'

The star tooltip become '4. Stars' for 4.9 rating.
I looked at the source code and found the reason.

Please see the attached screenshot.
I guess you wanted to remove 0 at end, but you didn't count dot (.)
formattedRating = formattedRating.slice(0, 2);
so 4.90 will be 4.

Hi, I want to get the index of the hovered star.
How can I do?

It is good practice to include changelog when releasing a new version of library. It would help developers identify any (possibly breaking) changes without looking into commits. The changelog can be added to releases version in releases tab on GitHub or a new file called CHANGELOG could be created for ability to read changes offline.

https://keepachangelog.com/en/1.0.0/

I am finding it difficult to use a function with three argument that works. like
changeRating = (a, b, c)=>{
...do something
};
currently, it only works with two argument, the ratings, and the name, e.g
changeRating = (rating, name) => {
...do something
}
can i extend it?
is there any recommended way?

It looks like that the module index.js in the build folder is improperly pathed when trying to pull from the star-ratings.js file in the src folder, which is causing an error when react-star-ratings is imported. Simply modifying the two './' imports in build/index.js also causes the program to crash as well

link: https://qwrqwr.de/productListing/delivery/76133/Kaiserallee%201,%2076133%20Karlsruhe/2

click to rated star in the middle.

get
node_modules/react-star-ratings/build/star-ratings.js:136

133 | var hoveredRating = this.state.highestStarHovered;
134 | var currentRating = hoveredRating > 0 ? hoveredRating : selectedRating;
135 | // fix it at 2 decimal places and remove trailing 0s

136 | var formattedRating = parseFloat(currentRating.toFixed(2)).toString();
| ^ 137 | if (Number.isInteger(currentRating)) {
138 | formattedRating = String(currentRating);
139 | }

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

Specifying typeOfWidget is insufficient. For example, I'm using this with election software and would like tooltips such as:

John Smith received an average rating of 4.5 stars among 1000 voters

In addition, the current implementation of titleText makes an assumption that typeOfWidget is a noun that can be pluralized by adding an 's'. This won't work in all cases. For example, the plural of "Cherry" is "Cherries"

The tooltip needs to be calculated dynamically. I suggest adding a new property that accepts a function:

tooltipFormater: is passed the current star rating and returns a string.