@licuido/ui_rating

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 [e-mail]

Link

Story Book Link Login

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido/ui_rating

Import component

import { Rating } from '@licuido/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