Skip to main content

RatingFabric component

Component for rendering a rating control.

📝 Signature​

RatingFabric(props: {
styles: {
color: string;
scale?: number;
};
steps: number;
shape?: "stars" | "hearts" | "thumbs-up" | "thumbs-down" | "persons";
required?: boolean;
disabled?: boolean;
readOnly?: boolean;
showLabels?: boolean;
ariaDescribedBy?: string;
tabIndex?: number;
value?: number | Value;
autoSubmit?: boolean;
onChange?: (value: number) => void;
onFocus?: (e: FocusEvent) => void;
onBlur?: (e: FocusEvent) => void;
onAutoFocus?: (el: HTMLButtonElement | null) => void;
onSubmit?: () => void;
onCancel?: () => void;
}): JSX.Element

📇 Props​

NameTypeOptionalDescription
stylesobjectNoSpecifies the styles for the rating buttons. Supports the following styles:
- color: Base color for the rating buttons;
- scale: Optional scale factor for the rating buttons (defaults to 1).
stepsnumberNoSpecifies the amount of steps for the rating.
shape"stars" | "hearts" | "thumbs-up" | "thumbs-down" | "persons"YesSpecifies the shape of the rating buttons (defaults to stars).
requiredbooleanYesSpecifies if the component is required.
disabledbooleanYesSpecifies if the component is disabled.
readOnlybooleanYesSpecifies if the component is read-only.
showLabelsbooleanYesSpecifies if the labels are displayed underneath the rating buttons.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
tabIndexnumberYesSpecifies the tabindex for the component.
valuenumber | ValueYesSpecifies the value for the component. When a string is specified, this is the initial value for the input control. When a Value is supplied, this initial value is retrieved from the Value instance. Changes made in the input control are automatically reflected to the Value instance.
autoSubmitbooleanYesSpecifies if the component gets submitted when the user selects a rating.
onChange(value: string) => voidYesInvoked when the value of the component is changed.
onFocus(e: FocusEvent) => voidYesInvoked when the component gets focus.
onBlur(e: FocusEvent) => voidYesInvoked when the component loses focus.
onAutoFocus(el: HTMLButtonElement | null) => voidYesInvoked when the HTML element of the component is available for auto-focus.
onSubmit() => voidYesInvoked when the user presses the Shift + Enter key combination or the Tab key (this event is often used to go to the next input control in a form).
onCancel() => voidYesInvoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩ī¸ Return value​

Returns the JSX.Element for the component.

👩‍đŸ’ģ Example​

import { RatingFabric } from "tripetto-runner-fabric/components/rating";

const RatingFabricExample = () => (
<RatingFabric
styles={{
color: "green"
}}
steps: 5
onChange={(value) => console.log(`Selected rating: ${value}`)}
/>
);