Sequencer

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


pnpm add @audio-ui/react

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

Export	Kind	What it is
`Sequencer.Cell`	function	One step of a row: a toggle button, pressed when the step is on.
`Sequencer.Root`	function	A grid of steps to switch on and off, one row per sound: the pattern of a drum machine.
`Sequencer.Cells`	function	Renders `children` once per step of the row it is in: the place to put a `Sequencer.Cell`.
`Sequencer.Row`	function	One sound's row of steps.
`Sequencer.Rows`	function	Renders `children` once per row: the place to put a `Sequencer.Row`.
`Sequencer.Velocity`	function	How loud one step plays, as a bar from the bottom of its box: the height is the velocity, through the `--sequencer-velocity` CSS variable.

Anatomy

Import the registry component for the ready-made look, or compose the primitive's parts yourself.

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

<Sequencer.Root>
  <Sequencer.Rows>
    {(row) => (
      <Sequencer.Row index={row}>
        <Sequencer.Cells>
          {(step) => <Sequencer.Cell step={step} />}
        </Sequencer.Cells>
      </Sequencer.Row>
    )}
  </Sequencer.Rows>
</Sequencer.Root>;

API reference

Root

A grid of steps to switch on and off, one row per sound: the pattern of a drum machine. Pressing a cell flips it, and dragging on carries the new state across every cell the pointer crosses. The cells are one tab stop, and the arrow keys move between them. The step being played comes from source and is marked on its cells straight in the DOM with data-current, so a clock ticking every step never re-renders React. Renders a <div> element.

Props · 10

Data attributes · 2

data-disabled

Present when disabled.

data-painting

Whether a pointer is painting cells.

Rows

Renders children once per row: the place to put a Sequencer.Row. Renders no element of its own.

Props · 1

Cells

Renders children once per step of the row it is in: the place to put a Sequencer.Cell. Renders no element of its own.

Props · 1

Row

One sound's row of steps. Name it with aria-label, such as "Kick". Renders a <div> element.

Props · 1

Data attributes · 2

data-disabled

Present when disabled.

data-painting

Whether a pointer is painting cells.

Cell

One step of a row: a toggle button, pressed when the step is on. Press it and drag on to paint the same state across the cells you cross; focused, Space or Enter flips it and the arrow keys move to the next cell. Name it with aria-label, such as "Kick, step 5". The step being played gets data-current. Renders a <button> element.

Props · 1

Data attributes · 3

data-disabled

Present when disabled.

data-on

Whether the step is on: also aria-pressed.

data-painting

Present when painting.

Velocity

How loud one step plays, as a bar from the bottom of its box: the height is the velocity, through the --sequencer-velocity CSS variable. Pressing it sets the velocity where the pointer is, and dragging on draws across the steps of the row. Alt + click or Delete brings it back to full. A native <input type="range"> inside takes the arrow keys and carries the accessible name. Put one per step of a Sequencer.Row, in a row of its own under the cells. Renders a <div> element.

Props · 2

Data attributes · 2

data-disabled

Present when disabled.

data-on

Whether the step is on.

Styled

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

Pad PianoRoll

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

RSS