react-star-rating-meter
a customizable React star rating component with or without a meter.
examples: https://dahlki.github.io/react-star-rating-meter/
code for the examples can be viewed in the example folder of this repo.
install:
https://www.npmjs.com/package/react-star-rating-meter
npm install --save react-star-rating-meter
or
yarn add react-star-rating-meter
properties:
all properties are optional (properties will revert to default values)
*note: color values can be any css valid color value; if you want a color property to be transparent use an empty string: ""
*note: if using a custom svg, only one 'path' can be given and also, the 'viewBox' value is required.
| Prop | DataType | Default | Description |
|---|---|---|---|
| readOnly | boolean | false | indicate whether the star rating is editable by the user or read only |
| numOfStars | number | 5 | number of stars |
| initialRating | number | 0 | set initial value |
| height | number (px) | 30 | height of the meter and highlight in pixels |
| length | number (px) | 250 | length of the meter in pixels |
| showMeter | boolean | true | indicate whether to show the meter or just show stars/svgs |
| label | string | StarRating | an option to label the component to easily get and store the rating value |
| meterEmptyColor | string | #F0E7E7 | set the default/empty meter color |
| meterSelectColor | string | #311E24 | set the select/active meter color |
| meterBorderColor | string | #785A65 | set the meter border color |
| meterBorderSize | number (px) | 3 | set the meter border thickness |
| meterBorderStyle | string | solid | set the border style; can be any css valid border style |
| highlightColor | string | #FFD6DD | set the highlight color of the selected/active star |
| highlightWidth | number (px) | 30 | set the width of the highlight (height is determined by the height prop, the height of the meter) |
| starEmptyColor | string | #AF9EA3 | set the default/empty color of the stars/svgs |
| starSelectColor | string | #D60429 | set the selected/active color of the stars/svgs |
| starSize | number (px) | 18 | size of the stars |
| getRating | function | undefined | set a function to be called upon clicking a star; the arguments passed are: (rating, label, event) |
| onHover | function | undefined | set a function to be called upon hovering a star; the arguments passed are: (rating, label, event) |
| svg | object = {path: string, viewBox: string} | (if none indicated, the svg is a star) | an object that must have both path and viewBox properties; if either one is missing, defaults to a star |