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.
See react-rating in action.
You can install rating-react
component using the npm package manager:
npm i rating-react
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
-
Install the library
npm i rating-react
-
Import the library into your component
import Rating from "rating-react";
-
Call it inside your component
<Rating />
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 |