npm package: @licuido-ui/ui_rating
Description: The Rating component is a customizable rating widget that allows users to provide feedback or rate items using stars or emojis. It provides various options for customizing the icons, styles, and behavior of the rating component. The Rating component can b
Latest version: 0.0.2

# Rating

The Rating component is a customizable rating widget that allows users to provide feedback or rate items using stars or emojis. It provides various options for customizing the icons, styles, and behavior of the rating component. The Rating component can be used in both star and emoji modes based on the variant prop.

### Author

- @author Akila K <akila@crayond.co>

## Link

[Story Book Link Login](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_rating
```

## Import component

```jsx
import { Rating } from '@licuido-ui/ui_rating';
```

## Usage

```jsx
<Rating  variant= 'star'
    precision = {1}
    starRatingData= {[
      {
        filled: <FavoriteIcon />,
        unFilled: <FavoriteBorder />,
        starValue: 4.5,
        overallRating: '240 Reviews',
      },
      {
        filled: <FavoriteIcon />,
        unFilled: <FavoriteBorder />,
        starValue: 3.5,
        overallRating: '240 Reviews',
      },
    ]}
  overallRatingStyle= {}
  onClick={(rating) => handleRatingChange(rating.starValue)} />
```

## Image

##### Variant1

![Emoji rating](./ratingEmoji.png)

##### Variant2

![Star rating](./ratingStar.png)

## Sample Code

```jsx
<Rating
 variant= 'star'
    precision = {1}
    starRatingData= {[
      {
        filled: <FavoriteIcon />,
        unFilled: <FavoriteBorder />,
        starValue: 4.5,
        overallRating: '240 Reviews',
      },
      {
        filled: <FavoriteIcon />,
        unFilled: <FavoriteBorder />,
        starValue: 3.5,
        overallRating: '240 Reviews',
      },
    ]}
  overallRatingStyle= {}
  onClick={(rating) => handleRatingChange(rating.starValue)}
/>
```

## Props

| Name                | Description                                                                                               | Default  | Control      |
| ------------------- | --------------------------------------------------------------------------------------------------------- | -------- | ------------ |
| ratingId            | string                                                                                                    | string   | string       |
| variant             | "star" or "emoji"                                                                                         | "emoji"  | star / emoji |
| emojiData           | An array of objects with properties `SelectIcon`, `unSelectIcon`, `label`, and `value`                    | []       | Set object   |
| selectedLabelStyle  | An object with styles to apply to the selected label                                                      | {}       | Set object   |
| emojiContainerStyle | An object with styles to apply to the emoji container                                                     | {}       | Set object   |
| className           | A string representing the class name to apply to the component                                            | -        | Set string   |
| sx                  | An object with styles to apply to the component root                                                      | -        | Set object   |
| starRatingData      | An array of objects with properties `filled`, `unFilled`, `starValue`, `overallRating`, and `maximumIcon` | []       | Set object   |
| overallRating       | An object with styles to apply to the overallRating                                                       | {}       | Set object   |
| onMouseEnter        | A function called when the mouse enters a star                                                            | () => {} | -            |
| onMouseLeave        | A function called when the mouse leaves a star                                                            | () => {} | -            |
| onClick             | A function called when a star is clicked                                                                  | () => {} | -            |
| isReadOnly          | A boolean value indicating whether the component is read-only                                             | false    | Set boolean  |
| isLabelVisible      | A boolean value indicating whether the labels are visible                                                 | true     | Set boolean  |
| childrenStyle       | An object with styles to apply to the children components                                                 | {}       | Set object   |
| precision           | A number representing the precision of the rating                                                         | 1        | Set number   |