react_chrome_speechtotext
v1.1.17
Published
Installation:
Downloads
6
Maintainers
Readme
Installation:
npm install react_chrome_speechtotext
Usage:
import React from 'react';
import SpeechToText from 'react_chrome_speechtotext'
import './index.css'
class App extends React.Component {
state = { start: false, txt: "Speech To Text Web Api" };
onClick = () => this.setState({ start: !this.state.start });
onListen = txt => this.setState({ txt: txt });
render() {
const { start, txt } = this.state;
return (
<div onClick={this.onClick} className='myDiv'>
<center>
<div className={start ? 'blink' : ''}>
<SpeechToText
start={start}
defaultText={txt}
onListen={this.onListen}
style={{ fontSize: 30, display: 'contents' }}
/>
</div>
<p>{txt}</p>
</center>
</div>
);
}
}
export default App;
index.css
.blink {
animation: blinker 0.9s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker {
from { opacity: 1; }
to { opacity: 0; }
}
.myDiv
{
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
position:fixed;
}
Demo Video https://www.loom.com/share/5a02e297a36c42678e698bbfd36cf053
Code sandbox https://codesandbox.io/s/goofy-hopper-2pxic