Meter

Meter is used to display finite value that are within a known range eg., CPU usage. It uses AdaptUI Core's Meter component internally.

import {
  Meter,
  MeterBar,
  MeterBarWrapper,
  MeterHint,
  MeterLabel,
  MeterTrack,
  MeterWrapper,
} from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage

<Meter value={40} max={100}  />

<Meter value={40} max={100}  />

Meter sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <Meter size="sm" value={20} max={100} />
      <Meter size="md" value={30} max={100} />
      <Meter size="lg" value={40} max={100} />
      <Meter size="xl" value={50} max={100} />
    </div>
  );
};

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <Meter size="sm" value={20} max={100} />
      <Meter size="md" value={30} max={100} />
      <Meter size="lg" value={40} max={100} />
      <Meter size="xl" value={50} max={100} />
    </div>
  );
};

Min max values

Set the min and max values of the progress bar.

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return <Meter value={35} max={100} />;
};

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return <Meter value={35} max={100} />;
};

Meter Label

Meter also comes with A11y label that can also be used to describe the meter.

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return <Meter value={50} max={100} label="Charging..." />;
};

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return <Meter value={50} max={100} label="Charging..." />;
};

Meter Hint

Meter comes with A11y hint that can be used with label to indicate the meter status.

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return <Meter value={50} max={100} label="Charging..." hint={50} />;
};

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return <Meter value={50} max={100} label="Charging..." hint={50} />;
};

Meter Interval

Meter has an interval that can be used to indicate multiple range of the meter.

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <Meter value={50} max={100} label="Charging..." hint={50} intervals={4} />
  );
};

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <Meter value={50} max={100} label="Charging..." hint={50} intervals={4} />
  );
};

Customizing Meter

To customize the appearance of the Meter component we can simply pass down children components (MeterTrack, MeterBar) for more control.

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <Meter value={40} max={100}>
      <MeterTrack className="bg-red-300" />
      <MeterBar className="bg-red-800" />
    </Meter>
  );
};

import { Meter } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <Meter value={40} max={100}>
      <MeterTrack className="bg-red-300" />
      <MeterBar className="bg-red-800" />
    </Meter>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`intervals`	`number`	-
`flatBorders`	`boolean`	-
`hint`	`React.ReactNode`	-
`label`	`React.ReactNode`	-

Last updated on July 26, 2022