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
101110import { useSpeechInputWithCursor } from ' @syntropy-labs/react-web-speech'
111+ import { useState , useRef } from ' react'
102112
103113function 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() {
136192Existing 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
156213yarn install
157214
158- # Start development
159- yarn dev
160-
161215# Run tests
162216yarn test
217+
218+ # Type check
219+ yarn typecheck
220+
221+ # Build
222+ yarn build
163223```
164224
165225## License
166226
167227MIT © [ SyntropyLabs] ( https://github.com/SyntropyLabs )
228+
0 commit comments