meter.md

Meter

Meter component can be used to provide a graphical display of a numeric value that varies within a defined range. It follows the WAI-ARIA Meter Pattern for it's accessibility properties.

Table of Contents

• Usage
• Other Examples
• Composition
• Props
  • MeterOptions
  • MeterStateProps

Usage

import * as React from "react";

import { Meter, useMeterState } from "@adaptui/react";

export const MeterBasic = props => {
  const state = useMeterState({
    value: 5,
    min: 0,
    max: 10,
    low: 0,
    high: 10,
    optimum: 5,
    ...props,
  });
  const { percent, status } = state;

  return (
    <div className="meter">
      <Meter
        aria-label="meter"
        className="meterbar"
        style={{
          width: `${percent}%`,
          backgroundColor: status == null ? undefined : background[status],
        }}
        state={state}
      ></Meter>
    </div>
  );
};

export default MeterBasic;

const background = {
  safe: "#8bcf69",
  caution: "#e6d450",
  danger: "#f28f68",
};

Other Examples

Composition

• Meter uses Role
• useMeterState uses its own state

Props

MeterOptions

Name	Type	Description
state	MeterState	Object returned by the useMeterState hook.

MeterStateProps

Name	Type	Description
value	number	The value of the meter indicator.If undefined/not valid the meter bar will be equal to min
min	number	The minimum value of the meter
max	number	The maximum value of the meter
low	number	The higher limit of min range.Defaults to min.
optimum	number	The lower limit of max range.Defaults to median of low & high.
high	number	The lower limit of max range.Defaults to max.