@adaptui/react
Version:
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit
62 lines (61 loc) • 1.43 kB
TypeScript
/**
* Provides state for the `Meter` components.
* @example
* ```jsx
* const meter = useMeterState();
* <Meter state={meter} />
* ```
*/
export declare function useMeterState({ value: defaultValue, min, max, ...props }?: MeterStateProps): MeterState;
declare type Status = "safe" | "caution" | "danger" | undefined;
export declare type MeterState = {
/**
* The `value` of the meter indicator.
*
* If `undefined`/`not valid` the meter bar will be equal to `min`
*
* @default 0
*/
value: number;
/**
* The minimum value of the meter
* @default 0
*/
min: number;
/**
* The maximum value of the meter
* @default 1
*/
max: number;
/**
* The higher limit of min range.
*
* Defaults to `min`.
* @default 0
*/
low: number;
/**
* The lower limit of max range.
*
* Defaults to `max`.
* @default 1
*/
high: number;
/**
* The lower limit of max range.
*
* Defaults to `median of low & high`.
* @default 0.5
*/
optimum: number;
/**
* Percentage of the value progressed with respect to min & max
*/
percent: number;
/**
* Status of the Meter based on the optimum value
*/
status: Status;
};
export declare type MeterStateProps = Pick<Partial<MeterState>, "value" | "min" | "max" | "low" | "optimum" | "high">;
export {};