MeterGroup API

API documentation for MeterGroup component

MeterGroupRoot#

Props#

Defines valid properties in MeterGroup 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?: MeterGroupRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupRootInstance) => 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<MeterGroupRootPassThrough>	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: MeterGroupRootInstance) => ReactNode)	null	The children to render.
orientation	"horizontal" \| "vertical"	horizontal	Specifies the layout of the component.
min	number	0	Minimum boundary value.
max	number	100	Maximum boundary value.
[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 MeterGroup component.

name	type	default	description
totalPercent	number	null	The total percentage of the meter group.

Exposes#

Defines the methods and properties exposed by MeterGroup component.

name	type	default	description
colors	Record<METERGROUP_DEFAULT_COLORS_TYPE, string>	null	Default colors used in the MeterGroup component.
getNextColorIndex	() => number	null	Gets the next color index.
getNextLabelIndex	() => number	null	Gets the next label index.
state	useMeterGroupState	null	The state of the useMeterGroup.
percent	(meterValue: number) => number	null	Converts a meter value to a percentage.
percentAsString	(meterValue: number) => string	null	Converts a meter value to a percentage string.
updateTotalPercent	(percent: number) => void	null	Updates the total percentage of the meter group.
resetTotalPercent	() => void	null	Resets the total percentage of the meter group to 0.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroup component.

name	type	default	description
root	MeterGroupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
meters	MeterGroupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the meters' DOM element.
meter	MeterGroupRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the meter's DOM element.
labels	MeterGroupRootPassThroughType<HTMLAttributes<HTMLOListElement>>	null	Used to pass attributes to the labels' DOM element.
label	MeterGroupRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the label's DOM element.
icon	MeterGroupRootPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the label icon's DOM element.
marker	MeterGroupRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the label marker's DOM element.
text	MeterGroupRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of MeterGroup component.

values
ComponentInstance<MeterGroupRootProps, MeterGroupRootState, MeterGroupRootExposes>

MeterGroupMeters#

Props#

Defines valid properties in MeterGroupMeters 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?: MeterGroupMetersInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupMetersInstance) => 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<MeterGroupMetersPassThrough>	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: MeterGroupMetersInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupMeters component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupMeters component.

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

Types#

Instance

Instance of MeterGroupMeters component.

values
ComponentInstance<MeterGroupMetersProps, MeterGroupMetersState, MeterGroupMetersExposes>

MeterGroupMeter#

Props#

Defines valid properties in MeterGroupMeter 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?: MeterGroupMeterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupMeterInstance) => 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<MeterGroupMeterPassThrough>	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: MeterGroupMeterInstance) => ReactNode)	null	The children to render.
value	number	null	Defines the value of the meter.
color	string & {} \| METERGROUP_DEFAULT_COLORS_TYPE	null	Defines the color of the meter.
index	number	null	Defines the index of the meter.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupMeter component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupMeter component.

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

Types#

Instance

Instance of MeterGroupMeter component.

values
ComponentInstance<MeterGroupMeterProps, MeterGroupMeterState, MeterGroupMeterExposes>

MeterGroupLabels#

Props#

Defines valid properties in MeterGroupLabels 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?: MeterGroupLabelsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupLabelsInstance) => 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<MeterGroupLabelsPassThrough>	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: MeterGroupLabelsInstance) => ReactNode)	null	The children to render.
orientation	"horizontal" \| "vertical"	horizontal	Specifies the label orientation of the component.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupLabels component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupLabels component.

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

Types#

Instance

Instance of MeterGroupLabels component.

values
ComponentInstance<MeterGroupLabelsProps, MeterGroupLabelsState, MeterGroupLabelsExposes>

MeterGroupLabel#

Props#

Defines valid properties in MeterGroupLabel 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?: MeterGroupLabelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupLabelInstance) => 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<MeterGroupLabelPassThrough>	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: MeterGroupLabelInstance) => ReactNode)	null	The children to render.
color	string	null	Defines the color of the label.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupLabel component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupLabel component.

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

Types#

Instance

Instance of MeterGroupLabel component.

values
ComponentInstance<MeterGroupLabelProps, MeterGroupLabelState, MeterGroupLabelExposes>

MeterGroupIcon#

Props#

Defines valid properties in MeterGroupIcon 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?: MeterGroupIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupIconInstance) => 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<MeterGroupIconPassThrough>	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: MeterGroupIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupIcon component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupIcon component.

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

Types#

Instance

Instance of MeterGroupIcon component.

values
ComponentInstance<MeterGroupIconProps, MeterGroupIconState, MeterGroupIconExposes>

MeterGroupMarker#

Props#

Defines valid properties in MeterGroupMarker 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?: MeterGroupMarkerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupMarkerInstance) => 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<MeterGroupMarkerPassThrough>	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: MeterGroupMarkerInstance) => ReactNode)	null	The children to render.
color	string & {} \| METERGROUP_DEFAULT_COLORS_TYPE	null	Defines the color of the marker.
index	number	null	Defines the index of the marker.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupMarker component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupMarker component.

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

Types#

Instance

Instance of MeterGroupMarker component.

values
ComponentInstance<MeterGroupMarkerProps, MeterGroupMarkerState, MeterGroupMarkerExposes>

MeterGroupText#

Props#

Defines valid properties in MeterGroupText 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?: MeterGroupTextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: MeterGroupTextInstance) => 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<MeterGroupTextPassThrough>	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: MeterGroupTextInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by MeterGroupText component.

name	type	default	description
metergroup	MeterGroupRootInstance	null	The MeterGroup component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of MeterGroupText component.

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

Types#

Instance

Instance of MeterGroupText component.

values
ComponentInstance<MeterGroupTextProps, MeterGroupTextState, MeterGroupTextExposes>

useMeterGroup#

Props#

Defines valid properties in useMeterGroup.

name	type	default	description
min	number	0	Minimum boundary value.
max	number	100	Maximum boundary value.

State#

Defines valid state in useMeterGroup.

name	type	default	description
totalPercent	number	null	The total percentage of the meter group.

Exposes#

Defines the methods and properties exposed by useMeterGroup.

name	type	default	description
state	useMeterGroupState	null	The state of the useMeterGroup.
percent	(meterValue: number) => number	null	Converts a meter value to a percentage.
percentAsString	(meterValue: number) => string	null	Converts a meter value to a percentage string.
updateTotalPercent	(percent: number) => void	null	Updates the total percentage of the meter group.
resetTotalPercent	() => void	null	Resets the total percentage of the meter group to 0.

Types#

Instance

Instance of useMeterGroup headless.

values
HeadlessInstance<useMeterGroupProps, useMeterGroupState, useMeterGroupExposes>