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 [email protected]

Link

Story Book Link Login

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_rating

Import component

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

Usage

<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

Variant2

Sample Code

<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 |