react-tts
A flexible SpeechSynthesis adapter for React.
Use
npm install react-tts
or yarn add react-tts
Components
TtsButton
TtsBase
props
props - includes -
cancel
- component returned when variant is set as
'cancel'
- component returned when variant is set as
-
pause
- component returned when variant is set as
'pause'
- component returned when variant is set as
-
resume
- component returned when variant is set as
'resume'
- component returned when variant is set as
-
speak
- component returned when variant is set as
'speak'
- component returned when variant is set as
-
variant
-
'cancel' | 'speak' | 'pause' | 'resume'
defaults to 'speak'
-
Tts
Higher-order component provides onClick TtsBase
functionality.
TtsBase
props
props - includes -
variant
-
'cancel' | 'speak' | 'pause' | 'resume'
defaults to 'speak'
-
TtsBase
forwardRef functional component, see SpeechSynthesisUtterance
props
-
Component
- The component used for the root node. Defaults to
<div />
- The component used for the root node. Defaults to
-
children
- The content of the component.
-
autoplay
- Tts will autoplay content, defaults to
false
- Tts will autoplay content, defaults to
-
lang
- Speech language, defaults to
document.documentElement.lang
- Speech language, defaults to
-
onEnd
- callback when finished speaking.
-
onError
- callback when error occurs preventing speaking.
-
onPause
- callback when speaking is paused.
-
onResume
- callback when paused speaking is resumed.
-
onStart
- callback when speaking is started.
-
pitch
- Float representing the pitch value between 0-2, defaults to 1.
-
rate
- Float representing the rate value between 0.1-10, defaults to 1.
-
text
- String value that is spoken and prioritized over children text content if set.
-
voice
- The speech voice, defaults to lang default.
-
volume
- Float representing volume between 0-1, defaults to 1.