Meter

The headless Meter of @audio-ui/react: its parts, what each renders and owns, and their props.


pnpm add @audio-ui/react

import { Meter } from "@audio-ui/react/meter";

Export	Kind	What it is
`Meter.Channel`	function	One channel of the meter, a `role="meter"`: name it with `aria-label` or a `Meter.Label`.
`Meter.Channels`	function	Renders one child per channel.
`Meter.Indicator`	function	The lit part of the channel, scaled to the level.
`Meter.Label`	function	Accessible label of the channel it is in.
`Meter.Mark`	function	A graduation of the level scale at `value`, such as -18 dB: placed along the meter's length from its minimum, upward for a vertical meter and rightward for a horizontal one.
`Meter.Peak`	function	The peak-hold mark, positioned at the channel's peak level; hidden while the channel has none.
`Meter.Root`	function	Groups the channels of a level meter.
`Meter.Track`	function	The full range of a channel, behind the indicator.
`Meter.Value`	function	The channel's formatted level (`format`/`locale` on Root).

Anatomy

Import the primitive and assemble its parts.

import { Meter } from "@audio-ui/react";

<Meter.Root>
  <Meter.Channels>
    {(index) => (
      <Meter.Channel index={index}>
        <Meter.Indicator />
        <Meter.Peak />
      </Meter.Channel>
    )}
  </Meter.Channels>
</Meter.Root>

API reference

Root

Groups the channels of a level meter. Levels come either from value (and peak) as React props, or from a live source: with a source the meter writes each frame straight to the DOM, so a signal updating 60 times a second never re-renders React. Renders a <div> element.

Props · 11

Channels

Renders one child per channel.

Props · 1

Channel

One channel of the meter, a role="meter": name it with aria-label or a Meter.Label. Carries data-clipping at or above the clip threshold. Renders a <div> element.

Props · 2

Data attributes · 1

data-clipping

Whether the level is at or above the clip threshold.

Indicator

The lit part of the channel, scaled to the level. Renders a <div> element.

Data attributes · 1

data-clipping

Whether the level is at or above the clip threshold.

Peak

The peak-hold mark, positioned at the channel's peak level; hidden while the channel has none. Renders a <div> element.

Data attributes · 1

data-clipping

Whether the level is at or above the clip threshold.

Value

The channel's formatted level (format/locale on Root). With a live source only the default text is kept current, not a children function. Renders a <span> element.

Mark

A graduation of the level scale at value, such as -18 dB: placed along the meter's length from its minimum, upward for a vertical meter and rightward for a horizontal one. Sits directly in Root, beside the channels. Decorative: each channel announces its own level. Renders a <div> element.

Props · 1

Styled

The registry's styled Meter, its usage and interaction: Meter.

XYPad Envelope

Built by Ouest Labs, the source code is available on GitHub.

RSS