- Docs
- components
- Meter
Meter
A Meter represents a quantity within a known range, or a fractional value.
The <meter> HTML element can be used to build a meter, however it is very difficult to style cross browser. Meter helps achieve accessible meters that can be styled as needed.
Installation
This components uses the following components, which you also need to install:
Copy and paste the following code into your project: meter.tsx
Loading...Update the import paths to match your project setup.
Reusable Wrapper - Example
If you will use a Meter in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper ProtoMeter. This wrapper serves as an excellent starting point for use throughout your codebase.
The ProtoMeter component extends the props of React Aria Meter and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the meter |
showValue | boolean | true | Whether to display the meter's value |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.