Skip to content

Commit a3c958c

Browse files
docs: add auto-restart feature, useSpeechInput options, useSpeechInputWithCursor details, and cursor utilities to README, alongside general updates.
1 parent 4050afa commit a3c958c

1 file changed

Lines changed: 75 additions & 14 deletions

File tree

README.md

Lines changed: 75 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
- 🎙️ **Mic permission state management** — Know if permission is `prompt`, `granted`, or `denied`
1111
- 📝 **Cursor-aware text insertion** — Insert transcribed text at cursor position
1212
- 🔇 **Auto-silence detection** — Automatically stop listening after silence
13+
- 🔄 **Auto-restart on network errors** — Resilient to connection issues
1314
- 🌐 **Browser compatibility** — Handles Chrome, Edge, Safari with proper prefixing
14-
- 📦 **Tree-shakeable** — Only bundle what you use (<3KB gzipped)
15+
- 📦 **Tree-shakeable** — Only bundle what you use (~5KB gzipped)
1516
- 🔷 **TypeScript-first** — Full type safety and IDE autocomplete
16-
- ⚛️ **React Compiler optimized**Pre-optimized with React Compiler
17+
- ⚛️ **React 18+ ready**Strict Mode compatible
1718

1819
## Installation
1920

@@ -74,9 +75,13 @@ The primary hook for speech-to-text functionality.
7475
| `lang` | `string` | `navigator.language` | Recognition language (e.g., 'en-US') |
7576
| `continuous` | `boolean` | `false` | Keep listening after pause |
7677
| `interimResults` | `boolean` | `true` | Show real-time partial results |
77-
| `silenceTimeout` | `number` | `3000` | Auto-stop after silence (ms) |
78-
| `onResult` | `(text: string, isFinal: boolean) => void` | - | Callback on speech result |
79-
| `onError` | `(error: SpeechError) => void` | - | Callback on error |
78+
| `maxAlternatives` | `number` | `1` | Max alternative transcriptions |
79+
| `silenceTimeout` | `number` | `3000` | Auto-stop after silence (ms), 0 to disable |
80+
| `autoRestart` | `boolean` | `false` | Auto-restart on network errors |
81+
| `onResult` | `(text, isFinal) => void` | - | Callback on speech result |
82+
| `onError` | `(error) => void` | - | Callback on error |
83+
| `onStart` | `() => void` | - | Callback when listening starts |
84+
| `onEnd` | `() => void` | - | Callback when listening ends |
8085

8186
#### Returns
8287

@@ -89,16 +94,21 @@ The primary hook for speech-to-text functionality.
8994
| `permissionState` | `'prompt' \| 'granted' \| 'denied' \| 'unsupported'` | Mic permission state |
9095
| `error` | `SpeechError \| null` | Error details |
9196
| `start` | `() => Promise<void>` | Start listening |
92-
| `stop` | `() => void` | Stop listening |
97+
| `stop` | `() => void` | Stop listening gracefully |
98+
| `abort` | `() => void` | Abort listening immediately |
9399
| `toggle` | `() => Promise<void>` | Toggle listening |
94-
| `clear` | `() => void` | Clear transcript |
100+
| `clear` | `() => void` | Clear transcript and error |
101+
| `requestPermission` | `() => Promise<MicPermissionState>` | Request mic permission |
102+
103+
---
95104

96105
### `useSpeechInputWithCursor(options)`
97106

98-
Extended hook for cursor-aware text insertion.
107+
Extended hook that automatically inserts transcribed text at the cursor position.
99108

100109
```tsx
101110
import { useSpeechInputWithCursor } from '@syntropy-labs/react-web-speech'
111+
import { useState, useRef } from 'react'
102112

103113
function VoiceTextarea() {
104114
const [value, setValue] = useState('')
@@ -108,7 +118,7 @@ function VoiceTextarea() {
108118
inputRef,
109119
value,
110120
onChange: setValue,
111-
appendSpace: true,
121+
appendSpace: true, // Add space after inserted text
112122
})
113123

114124
return (
@@ -120,6 +130,52 @@ function VoiceTextarea() {
120130
}
121131
```
122132

133+
#### Additional Options
134+
135+
| Option | Type | Default | Description |
136+
|--------|------|---------|-------------|
137+
| `inputRef` | `RefObject<HTMLInputElement \| HTMLTextAreaElement>` | **required** | Ref to the input element |
138+
| `value` | `string` | **required** | Current controlled value |
139+
| `onChange` | `(value: string) => void` | **required** | Value setter |
140+
| `appendSpace` | `boolean` | `true` | Add space after inserted text |
141+
142+
#### Additional Returns
143+
144+
| Property | Type | Description |
145+
|----------|------|-------------|
146+
| `insertAtCursor` | `(text: string) => void` | Manually insert text at cursor |
147+
148+
---
149+
150+
### Cursor Utilities
151+
152+
Low-level utilities for cursor position management:
153+
154+
```tsx
155+
import {
156+
supportsSelection,
157+
getCursorPosition,
158+
setCursorPosition,
159+
insertTextAtCursor
160+
} from '@syntropy-labs/react-web-speech'
161+
162+
// Check if input type supports cursor APIs
163+
supportsSelection(inputElement) // true for text, search, tel, password, url
164+
165+
// Get current cursor position
166+
const { start, end } = getCursorPosition(inputElement)
167+
168+
// Set cursor position (uses requestAnimationFrame for React compatibility)
169+
setCursorPosition(inputElement, position, { focus: true })
170+
171+
// Insert text at cursor in controlled input
172+
insertTextAtCursor(inputRef, 'hello', currentValue, setValue)
173+
```
174+
175+
> **Note:** `email` and `number` input types don't support cursor APIs. The utilities fall back to appending text at the end.
176+
177+
---
178+
123179
## Browser Support
124180

125181
| Browser | Support |
@@ -136,12 +192,13 @@ function VoiceTextarea() {
136192
Existing React speech-to-text packages lack critical production-ready features:
137193

138194
| Feature | Other Packages | This Package |
139-
|---------|---------------|--------------|
195+
|---------|---------------|--------------|
140196
| Mic permission state |||
141197
| Insert text at cursor |||
142198
| Auto-silence detection |||
199+
| Auto-restart on errors |||
143200
| TypeScript-first | Varies ||
144-
| React Compiler support |||
201+
| React 18 Strict Mode |||
145202

146203
## Contributing
147204

@@ -155,13 +212,17 @@ cd react-web-speech
155212
# Install dependencies
156213
yarn install
157214

158-
# Start development
159-
yarn dev
160-
161215
# Run tests
162216
yarn test
217+
218+
# Type check
219+
yarn typecheck
220+
221+
# Build
222+
yarn build
163223
```
164224

165225
## License
166226

167227
MIT © [SyntropyLabs](https://github.com/SyntropyLabs)
228+

0 commit comments

Comments
 (0)