@mantine/core/lib/components/Rating/Rating.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
export type RatingStylesNames = 'root' | 'starSymbol' | 'input' | 'label' | 'symbolBody' | 'symbolGroup';
export type RatingCssVariables = {
    root: '--rating-size' | '--rating-color';
};
export interface RatingProps extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {
    /** Uncontrolled component default value */
    defaultValue?: number;
    /** Controlled component value */
    value?: number;
    /** Called when value changes */
    onChange?: (value: number) => void;
    /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */
    emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);
    /** Icon displayed for selected rating items. Can be a function that receives the rating value. */
    fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);
    /** Number of fractions each item can be divided into, default is 1 */
    fractions?: number;
    /** Controls component size @default 'sm' */
    size?: MantineSize | number | (string & {});
    /** Number of rating items (stars), default is 5 */
    count?: number;
    /** Called when rating item is hovered. Receives -1 when hover ends. */
    onHover?: (value: number) => void;
    /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */
    getSymbolLabel?: (index: number) => string;
    /** Name attribute for form submission. If not provided, a unique id will be generated. */
    name?: string;
    /** When true, rating cannot be changed by user interaction, default is false */
    readOnly?: boolean;
    /** When true, clicking the same rating value clears the rating to 0, default is false */
    allowClear?: boolean;
    /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */
    highlightSelectedOnly?: boolean;
    /** Key of theme.colors or any CSS color value, default is 'yellow' */
    color?: MantineColor;
}
export type RatingFactory = Factory<{
    props: RatingProps;
    ref: HTMLDivElement;
    stylesNames: RatingStylesNames;
    vars: RatingCssVariables;
}>;
export declare const Rating: import("../..").MantineComponent<{
    props: RatingProps;
    ref: HTMLDivElement;
    stylesNames: RatingStylesNames;
    vars: RatingCssVariables;
}>;