Command
useListensCommand@listenssoft/speechui-reactThe headless primitive: attach a spoken command to anything and run your own code when it's heard.
Every trigger control — label button, toggle, toggle button — is this primitive plus rendering. Use it directly to make your existing components speech-aware: give it a command and a callback; it handles matching, claims, and the interim-result cooldown.
Wiring a command to your own UI
Loading the React kit…
Hold anywhere and say:“undock”
import { useListensCommand } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [status, setStatus] = useState("docked"); useListensCommand({ command: "undock", onTriggered: () => setStatus("undocked"), }); return ( <div style={{ display: "grid", gap: 8, justifyItems: "start" }}> <button onClick={() => setStatus("undocked")}> Undock </button> <span>Status: {status}</span> </div> );}Page-level commands (React only)
useListensGlobalCommand registers a command tied to no element — navigation, mode switches, anything page-wide.
Loading the React kit…
Hold anywhere and say:“go to settings”“go home”
import { useListensGlobalCommand } from "@listenssoft/speechui-react";import { useState } from "react";
// Page-level commands aren't tied to any element — navigation is the// classic use. React-only.function Demo() { const [page, setPage] = useState("home"); useListensGlobalCommand({ command: "go to settings", onTriggered: () => setPage("settings"), }); useListensGlobalCommand({ command: "go home", onTriggered: () => setPage("home"), }); return <span>Current page: {page}</span>;}What you can say
| Say | Effect |
|---|---|
| “undock” | Runs onTriggered once (contains match, claims respected, ~1s cooldown per command). |
| “…prepare to undock now…” | Also fires — the command may appear anywhere in the phrase. |
API reference
React props for @listenssoft/speechui-react.
useListensCommand options
| Option | Type | Default | Description |
|---|---|---|---|
command* | string | — | The phrase to listen for. |
onTriggered* | () => void | — | Runs when the command is detected. |
Returns { isListening }. The interpreter (with its claims and cooldown) is created once per hook instance.
useListensGlobalCommand options (React only)
| Option | Type | Default | Description |
|---|---|---|---|
command* | string | — | The phrase to listen for. |
onTriggered* | () => void | — | Runs when the command is detected. |
Returns { isListening }.
Behavior notes
- React: For an element you also want speech to click (rather than running arbitrary code), the bare button wraps this wiring for you.
