react-star-rating-meter

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