Picker
ListensPicker@listenssoft/speechui-reactA color picker whose grid opens on command and answers to color names: “color dark red”.
Speaking the command opens the swatch grid (once per listening session); whatever follows is matched against color names, most specific first — “dark red” wins over “red”. The palette is shared across all kits: light, base, and dark variants of nine hues, plus black and white — 29 names in all.
Basic picker
Loading the React kit…
Hold anywhere and say:“color”“color dark red”“color light blue”
Props
- default command
React
Updates as you tick propsimport { ListensPicker } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [color, setColor] = useState("blue"); return ( <ListensPicker label="Accent color" command="color" value={color} onChange={(name, hex) => setColor(name)} /> );}What you can say
| Say | Effect |
|---|---|
| “color” | Opens the swatch grid (once per listening session). |
| “color dark red” | Opens if needed and selects dark red — most-specific name first, so “dark red” never lands on “red”. |
| “color … pink” | The name may arrive later in the same phrase; the first matching color wins. |
| “purple (no command configured)” | With no command set, any color name spoken selects directly. |
The spoken names are: light/dark/plain red, orange, yellow, green, blue, purple, pink, brown, grey — plus black and white.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listeningContent | ReactNode | command | Content shown as the label while the mic is open — a place for a hint like “say: volume to seventy”. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label above the picker; the command fallback. |
command | string | label | The spoken command that opens the grid; the remainder selects a color. |
value | string | — | Controlled selected color name (e.g. "dark red"). |
onChange | (colorName: string, hex: string) => void | — | Called when a color is chosen — click or speech — with its name and hex. |
onMatch | (colorName: string, hex: string) => void | — | Called when speech (not clicking) selects a color. |
className | string | — | Extra class name(s) on the root. |
classNames | ListensPickerClassNames | — | Per-part class overrides (label, listeningLabel, preview, swatch, colorName, arrow, grid, option). Each is appended after the component's own classes, so your rules win without extra specificity. |
Styling hooks
classNames parts and CSS classes
| Hook | Type | Default | Description |
|---|---|---|---|
classNames.preview / .listens-picker-preview | class | — | The closed-state row: swatch, color name, arrow. |
classNames.grid / .listens-picker-grid | class | — | The open swatch grid. data-open marks the open state on the root. |
classNames.option / .listens-picker-option | class | — | Each swatch button in the grid. |
.listens-picker | class | — | Root element. |
Behavior notes
- All frameworks: Closing and reopening by voice within one hold is deliberate: the grid opens once per listening session, so interim re-deliveries don't flap it.
