Rating

The Rating component provides an interactive star rating system that allows users to view or select a rating value. It's highly customizable with different sizes, colors, and can be set to read-only mode.

Import

import Rating from "@brightcodeui/beta-ui";

Props

Prop	Type	Default	Description
value	number	0	The current rating value
max	number	5	The maximum rating value (number of stars)
readOnly	boolean	false	If true, the rating cannot be changed
size	`"sm"	"md"	"lg"`
color	`"default"	"primary"	"secondary"
onChange	(value: number) => void	undefined	Callback function called when the rating changes
className	string	undefined	Additional CSS class names

Basic Usage

Example

code

    import { Rating } from "@brightcodeui/beta-ui";

    export function BasicRating() {
        const [value, setValue] = React.useState(3);
        
        return (
            <Rating 
                value={value} 
                onChange={setValue} 
                size="lg"
            />
        );
    }

Different Colors

Example

code

       import { Rating } from "@brightcodeui/beta-ui";

       export function RatingColors() {
           return (
               <div className="flex flex-col gap-2">
                   <Rating value={3} color="default" />
                   <Rating value={3} color="primary" />
                   <Rating value={3} color="secondary" />
                   <Rating value={3} color="success" />
                   <Rating value={3} color="warning" />
                   <Rating value={3} color="danger" />
               </div>
           );
       }

Read-Only Rating

import { Rating } from "@brightcodeui/beta-ui";

export function ReadOnlyRating() {
  return <Rating value={4} readOnly />;
}

Custom Maximum

import { Rating } from "@brightcodeui/beta-ui";

export function TenStarRating() {
  return <Rating value={7} max={10} />;
}

Different Sizes

Example

code

    import { Rating } from "@brightcodeui/beta-ui";

    export function RatingSizes() {
        return (
            <div className="flex flex-col gap-2">
                <Rating value={3} size="sm" />
                <Rating value={3} size="md" />
                <Rating value={3} size="lg" />
            </div>
        );
    }

Component API

import Rating from "@brightcodeui/beta-ui";

<Rating
  value={3}
  max={5}
  readOnly={false}
  size="md"
  color="default"
  onChange={(newValue) => console.log(newValue)}
  className="my-custom-class"
/>