Text
ListensText@listenssoft/speechui-reactDisplay text that swaps when listening.
Renders listeningContent instead of its normal content while the mic is open.
Under a provider
Hold inside the frame: the text swaps while you hold and swaps back on release.
Loading the React kit…
Props
React
Updates as you tick propsimport { ListensText } from "@listenssoft/speechui-react";
function Demo() { return ( <p> <ListensText listeningContent='“Listening is active”'> Hold anywhere on the page to talk. </ListensText> </p> );}API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listeningContent | ReactNode | — | Content shown instead of children while the mic is open. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content shown when not listening. |
…HTMLAttributes<HTMLSpanElement> | span props | — | Everything else (className, style, id, aria-*) is forwarded to the rendered <span>. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-text | class | — | The rendered span. While listening it carries data-listening and shows the accent color by default. |
--listens-accent | token | — | The listening color the swap uses. Override to retheme. |
Behavior notes
- All frameworks: Text is the one control that does not register with the page contract (there is nothing to command), so it injects the default stylesheet itself rather than via registration.
- React:
listeningContentaccepts any ReactNode; the Angular input is a string.
