@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
42 lines (41 loc) • 1.93 kB
TypeScript
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type RollingNumberStylesNames = 'root' | 'digit' | 'digitColumn' | 'char';
export type RollingNumberCssVariables = {
root: '--rn-duration' | '--rn-timing-function';
};
export interface RollingNumberProps extends BoxProps, StylesApiProps<RollingNumberFactory>, ElementProps<'div'> {
/** Number value to display */
value: number;
/** Prefix added before the value */
prefix?: string;
/** Suffix added after the value */
suffix?: string;
/** Character used as a decimal separator @default '.' */
decimalSeparator?: string;
/** Character used to separate thousands, set to `true` for `,` @default false */
thousandSeparator?: string | boolean;
/** Number of decimal places to display */
decimalScale?: number;
/** If set, trailing zeros are added to match `decimalScale` @default false */
fixedDecimalScale?: boolean;
/** Animation duration in milliseconds @default 600 */
animationDuration?: number;
/** CSS timing function for animation @default 'ease' */
timingFunction?: string;
/** If set, use tabular (monospace) numbers @default true */
tabularNumbers?: boolean;
/** If set, the root element acts as an `aria-live="polite"` region (`role="status"`) and screen readers announce every value change. When `false`, the root uses `role="img"` so the current value is still accessible but updates are not announced. @default false */
withLiveRegion?: boolean;
}
export type RollingNumberFactory = Factory<{
props: RollingNumberProps;
ref: HTMLDivElement;
stylesNames: RollingNumberStylesNames;
vars: RollingNumberCssVariables;
}>;
export declare const RollingNumber: import("../..").MantineComponent<{
props: RollingNumberProps;
ref: HTMLDivElement;
stylesNames: RollingNumberStylesNames;
vars: RollingNumberCssVariables;
}>;