Rating

ERating is an efficient way to assign a rating to content to demonstrate its quality or performance in several domains. Demo Here

Import

import ERating from "@components/Elements/ERating";

Usage

const RatingExample = () => {
  const [rating, setRating] = useState(1);

  const handleChange = (event, value) => {
    setRating(value);
  };

  return <ERating color="warning" rate={rate} onChange={handleChange} />;
};

export default RatingExample;

Props

For ERating component, the following props are available:

Prop	Type	Default	Note
value	Number	-	The rating value.
length	Number	5	Changes the number of rating icons.
hover	Boolean	false	Hovering over the ratings determines a rating value.
className	String	-	Overrides or extends the component's wrapper styles.
size	String	"md"	The ERating element has three predefined sizes: sm, md, lg.
readOnly	Boolean	false	disables the ability to interact with the symbols. Displays data about the average rating level.
icon	Object	{name: Star1,size: 24,type: linear}	Customizes the icon of ERating element. More Info about icons here.
color	String	"primary"	The given color is applied to the ERating - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Callback Functions

The ERating component contains following callback functions.

Function	Description
onChange	Prop that you pass to control the rating value. function(event: React.SyntheticEvent, ratingValue: Number) => void 👇 • event: The event source of the callback. • ratingValue: new value