UsageMeters

Lays out a group of usage meters.

SourcePackage @kerf-js/veneer

Preview

tsx

import { UsageMeter, UsageMeters } from '@kerf-js/veneer'export function ThisMonth() {  return (  <UsageMeters>    <UsageMeter      label="Build minutes"      value={1240}      limit={3000}      format={(n) => n.toLocaleString('en-US')}    />    <UsageMeter      label="Bandwidth"      value={412}      limit={500}      format={gigabytes}      note="Slows down past the limit, never stops."    />    <UsageMeter      label="Seats"      value={8}      limit={10}    />    <UsageMeter      label="Log storage"      value={11.2}      limit={10}      format={gigabytes}      overage="+ $12.40 overage"    />  </UsageMeters>  )}const gigabytes = (n: number) => `${n} GB`

Installation

npm install @kerf-js/veneer

Usage

tsx

import { UsageMeters } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`children`	`unknown`	—	What it contains.

RelatedUsage meter