Meter

Meter is used to display finite value that are within a known range eg., CPU usage.

Imports#

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

Usage#

<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

<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.

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

Meter Label#

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

<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.

<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.

<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.

<Meter value={40} max={100}>
  <MeterTrack className="bg-red-300" />
  <MeterBar className="bg-red-800" />
</Meter>

API Reference#