- 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
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 JollyMeter
. This wrapper serves as an excellent starting point for use throughout your codebase.
The JollyMeter
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.