Rating API

API documentation for Rating component

RatingRoot#

Props#

Defines valid properties in Rating component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: RatingRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: RatingRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<RatingRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: RatingRootInstance) => ReactNode)	null	The children to render.
name	string	null	Name of the element.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
value	number	null	Value of the rating.
defaultValue	number	null	The default value for the input when not controlled by `modelValue` .
allowHalf	boolean	true	Whether to allow half stars.
stars	number	5	Number of stars.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readOnly	boolean	false	When present, it specifies that component is read-only.
onValueChange	(event: useRatingChangeEvent) => void	null	Callback function that is called when the value changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Rating component.

name	type	default	description
value	number	null	The value of the rating.
hoverValue	number	null	The hover value of the rating.
focusedOptionIndex	number	null	The focused option index of the rating.
isFocusVisibleItem	boolean	null	Whether the focus is visible item of the rating.

Exposes#

Defines the methods and properties exposed by Rating component.

name	type	default	description
state	useRatingState	null	Current state of the rating.
getOptionState	(value: number) => string	null	Get the state of a star.
onInputFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Handle input focus event.
onInputBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Handle input blur event.
onInputChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Handle input change event.
onOptionClick	(event: MouseEvent<HTMLDivElement>, value: number) => void	null	Handle option click event.
onOptionHover	(event: PointerEvent<HTMLDivElement>, value: number) => void	null	Handle option hover event.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Rating component.

name	type	default	description
root	RatingRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of Rating component.

values
ComponentInstance<RatingRootProps, RatingRootState, RatingRootExposes>