IRatingProps

@spartanfx/react v1.2.2

---

@spartanfx/react / index / IRatingProps

Interface: IRatingProps

Props for the Rating component.

Example

// Interactive controlled rating
const [rating, setRating] = React.useState(3);
<Rating value={rating} onChange={setRating} />

// Read-only display (e.g., showing average rating)
<Rating value={3.5} onChange={() => {}} readOnly />

// With custom colors and label
<Rating
  value={rating}
  onChange={setRating}
  fillColor="#FF6B6B"
  label="Rate this product"
/>

// Circle variant with large size
<Rating
  value={rating}
  onChange={setRating}
  variant={RatingVariant.Circle}
  size={RatingSize.Large}
/>

Properties

Required

Property	Type	Default	Description
onChange	(value) => void	-	Callback fired when the user selects a rating value. This is a controlled component - update the value prop in this callback. Not called when readOnly is true. Example const [rating, setRating] = React.useState(3); <Rating value={rating} onChange={setRating} />
value	number	-	Current rating value (supports decimals like 2.5 for half-filled elements)

Options

Property	Type	Default	Description
ariaLabel?	string	-	Custom aria-label for the rating container. If not provided, a default label will be generated based on the current value.
inlineLabel?	boolean	false	When true, displays label and rating inline (horizontal). When false, displays label above rating (vertical).
label?	string	-	Optional label text displayed with the rating
max?	number	5	Maximum rating value (number of rating elements)
min?	number	1	Minimum rating value (inclusive)
noBorder?	boolean	false	When true, removes the border and shadow from the container
readOnly?	boolean	false	When true, the rating is display-only (no hover effects or click handling). Useful for showing average ratings or static displays.
size?	RatingSize	RatingSize.Medium	Size preset for rating elements
variant?	RatingVariant	RatingVariant.Star	Visual variant for rating elements

Events & callbacks

Property	Type	Default	Description
onRenderElement?	(props) => ReactElement	-	Custom render function for rating elements. When provided, overrides the default icon rendering.

Appearance & theming

Property	Type	Default	Description
appearanceMode?	AppearanceMode	AppearanceMode.light	Appearance mode: light or dark
className?	string	-	Additional CSS class name for the root element
classNames?	IRatingClassNames	-	Class name overrides for component elements
fillColor?	string	-	Override the default fill color for active/filled elements
outlineColor?	string	-	Override the default outline color for empty elements
style?	CSSProperties	-	Inline styles for the root element
tokens?	IRatingTokens	-	Customization tokens for styling