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