Rating React

Rating React is an easy-to-use react rating component that allows the user to select a rating with stars, numbers or emojis, useful for reviews.

Demo

See react-rating in action.

Installation

You can install rating-react component using the npm package manager:

npm i rating-react

Dependencies

The react-rating component peer depends on the React library, the Prop-Types library and React-Icons library.

Install React using npm too:

npm i react

Install Prop-Types using npm too:

npm i prop-types

Install React-Icons using npm too:

npm i react-icons

Usage

1. Install the library

   npm i rating-react

2. Import the library into your component

   import Rating from "rating-react";

3. Call it inside your component

   <Rating />

Properties

Prop	Type	Description	Default
maxRating	number	Maximum number of icons for rating.	5
onRate	function	Callback function that is called when the user selects a rating.	undefined
value	number	Rating value (if externally controlled).	undefined
readOnly	bool	If set to true, do not allow user interaction.	false
disabled	bool	If set to true, disables the component.	false
size	string	Icon size. Options: "sm", "md", "lg".	"md"
defaultColor	string	Color of inactive icons.	"#ffc107"
activeColor	string	Color de los íconos activos.	undefined
showNoRatingGiven	bool	Displays text if no rating has been given.	false
disabledOpacity	number	Opacity of the component when disabled.	0.5
resettable	bool	Allows resetting the rating to 0.	false
tooltip	array of strings	Tooltips to display when hovering over the icons.	[]
iconType	string	Type of icon to display. Options: "stars", "hearts", "thumbs", "faces".	"stars"
ariaLabel	string	ARIA label for accessibility.	"rating"
showValue	bool	Displays the current rating value.	false

License

MIT License