Text area
ListensTextArea@listenssoft/speechui-reactMulti-line dictation with no value filter — say the command and keep talking.
The text area is the text field pattern without a type filter: free text, streamed into the value while you speak, flushed to onMatch once when listening stops. Everything about matching, claims, and the contains fallback is identical.
Dictating multi-line text
Loading the React kit…
Hold anywhere and say:“notes approach was nominal”“notes crew is go for launch”
Props
- default command
- not set
React
Updates as you tick propsimport { ListensTextArea } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [notes, setNotes] = useState(""); return ( <ListensTextArea label="Notes" command="notes" rows={4} placeholder="Dictate mission notes…" value={notes} onChange={(e) => setNotes(e.target.value)} onMatch={setNotes} /> );}What you can say
| Say | Effect |
|---|---|
| “notes all systems nominal” | Starts-with match: streams “all systems nominal” into the value as you speak. |
| “the notes say all clear” | Contains fallback: sets the value to the words after the command (“say all clear”) if nothing else claimed the phrase. |
onMatch fires once, when listening stops, with the final accumulated value.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listeningContent | ReactNode | command | Content shown as the label above the textarea while the mic is open — a place for a hint like “say: volume to seventy”. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
command | string | label | The spoken prefix that starts dictation. Falls back to label. |
label | string | — | Label above the textarea; the command fallback. |
onMatch | (value: string) => void | — | Fires once when listening stops, with the final accumulated value. |
…TextareaHTMLAttributes | textarea props | — | value, onChange, rows, placeholder, disabled and the rest are forwarded to the native <textarea>. |
classNames | ListensTextAreaClassNames | — | Per-part class overrides (label, listeningLabel, input). 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.label / .listens-textarea-label | class | — | The label. listeningLabel joins it while the mic is open. |
classNames.input / .listens-textarea-input | class | — | The native textarea. |
.listens-textarea | class | — | Root wrapper. |
Behavior notes
- All frameworks: No
typefilter by design — multi-line dictation is free text.
