https://github.com/ahrjarrett/react-speak
Stupid-simple React component for working with the Web Speech api
https://github.com/ahrjarrett/react-speak
react redux webspeech webspeech-api
Last synced: 5 months ago
JSON representation
Stupid-simple React component for working with the Web Speech api
- Host: GitHub
- URL: https://github.com/ahrjarrett/react-speak
- Owner: ahrjarrett
- Created: 2018-05-22T05:40:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-11T18:13:01.000Z (over 7 years ago)
- Last Synced: 2025-10-13T09:55:12.599Z (9 months ago)
- Topics: react, redux, webspeech, webspeech-api
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-speak
- Size: 34.2 KB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-speak
Simple, extensible React HOC for interop with the [Web SpeechRecognition](https://w3c.github.io/speech-api/speechapi.html) API.
[Visit react-speak on npm](https://www.npmjs.com/package/react-speak).
## Dependencies:
- [React 16](https://github.com/facebook/react)
- [PropTypes](https://github.com/facebook/prop-types)
## Install
Do:
```$ npm install react-speak```
or:
```$ yarn add react-speak```
## Simple Usage
Using `react-speak` is pretty simple because it's designed to do one thing well: allow your React/Redux components to work with your browser's native Web SpeechRecognition API and give you access to a user's microphone.
Under the hood, `withSpeech` is a function that takes a component and returns a wrapped component with the following PropTypes:
``` jsx
WithSpeech.propTypes = {
startListening: PropTypes.func.isRequired,
stopListening: PropTypes.func.isRequired,
addToRegister: PropTypes.func,
}
```
The package was written to be used with Redux, so all three props were designed to be action creators that return action objects (see the Redux section below).
## Example Setup
Here's a simple setup using Redux:
``` jsx
import withSpeech from 'react-speak'
import React from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { startListening, stopListening, addToRegister, clearRegister } from '../actions/speech'
// Whatever state you care about:
const mapStateToProps = state => ({
isListening: state.isListening,
register: state.register
})
const mapDispatchToProps = {
startListening,
stopListening,
addToRegister,
clearRegister
}
const YourComponentWithSpeech = props => (
{props.isListening
? null
: (
onSave(props.register)}>
Start speaking
)
}
{props.register.map(transcript => {transcript})}
)
export default compose(
connect(mapStateToProps, mapDispatchToProps),
withSpeech,
)(YourComponentWithSpeech)
```
## Redux:
`withSpeech` returns a component with the following props:
* `startListening` (function, required)
* `stopListening` (function, required)
* `addToRegister` (function)
All three are action creators that return action objects.
`startListening` and `stopListening` are similar in that they
don't receive any particular payload from the withSpeech
component; your action creator could be as simple as:
``` js
const startListening = () => ({ type: INIT_LISTEN })
```
`addToRegister` on the other hand receives a transcript or "register",
which is just an array of strings from your user's microphone. You can pass
this as a payload to your reducers and do whatever you want with next.
An example action creator:
``` js
const sendToAlexa = transcript => ({
type: TRANSCRIPT_SENT,
payload: transcript
})
```
## FAQ:
* _Q:_ Do I have to use Redux?
* _A:_ Currently this only officially supports a Redux or Flux-type model where you have reducers that listen for the actions that withSpeech returns, and manages the logic for how this component actually mutates state.
* _Q:_ How can I contribute?
* _A:_ Contributions are totally welcome! See the section on contributing below.
## Contributing
PRs that abstract this component's functionality to React in general are absolutely welcome! Also, drop me a line if you're interested in helping me work with the [SpeechSynthesis](https://w3c.github.io/speech-api/speechapi.html#tts-section) interface, as currently `withSpeech` only implements the [SpeechRecognition](https://w3c.github.io/speech-api/speechapi.html#speechreco-section) protocol.