grvcoelho / React Voice Components
Licence: mit
Set of React components that use the Web Speech API to bring voice experience to React applications
Stars: ✭ 195
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Voice Components
React Awesome Slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Stars: ✭ 2,343 (+1101.54%)
Mutual labels: react-component
React Native Card Flip
Card flip animation for React Native
Stars: ✭ 183 (-6.15%)
Mutual labels: react-component
React Terminal Component
Terminal emulator component for React. Emulate a terminal/console with autocomplete, commands, a file-system and themes.
Stars: ✭ 169 (-13.33%)
Mutual labels: react-component
React Component Echarts
React component echarts. 组件式百度图表。
Stars: ✭ 175 (-10.26%)
Mutual labels: react-component
React Credit Cards
Beautiful credit cards for your payment forms
Stars: ✭ 2,239 (+1048.21%)
Mutual labels: react-component
React Paginate
A ReactJS component that creates a pagination
Stars: ✭ 2,169 (+1012.31%)
Mutual labels: react-component
React Native Image Viewer
🚀 tiny & fast lib for react native image viewer pan and zoom
Stars: ✭ 2,334 (+1096.92%)
Mutual labels: react-component
Video React
A web video player built for the HTML5 world using React library.
Stars: ✭ 2,227 (+1042.05%)
Mutual labels: react-component
React Mobile Picker
An iOS like select box component for React
Stars: ✭ 180 (-7.69%)
Mutual labels: react-component
React Tradingview Widget
React component for rendering the TradingView Advanced Real-Time Chart Widget.
Stars: ✭ 170 (-12.82%)
Mutual labels: react-component
Animate Css Styled Components
simple port of animate css for styled-components
Stars: ✭ 173 (-11.28%)
Mutual labels: react-component
Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (+912.82%)
Mutual labels: react-component
React Anchor Link Smooth Scroll
React component for anchor links using the smooth scroll polyfill.
Stars: ✭ 186 (-4.62%)
Mutual labels: react-component
React Tiny Virtual List
A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
Stars: ✭ 2,057 (+954.87%)
Mutual labels: react-component
React Translated
A dead simple way to add complex translations (i18n) in a React (DOM/Native) project 🌎🌍🌏
Stars: ✭ 176 (-9.74%)
Mutual labels: react-component
React Datepicker2
react datepicker component.(include persian jalaali calendar)
Stars: ✭ 191 (-2.05%)
Mutual labels: react-component
React Country Region Selector
Country / region React select boxes for your forms.
Stars: ✭ 189 (-3.08%)
Mutual labels: react-component
React Rater
⭐️ Interative & customizable star rater
Stars: ✭ 180 (-7.69%)
Mutual labels: react-component
react-voice-components
Set of React components that use the Web Speech API to bring voice experience to React applications. Check out the ✨ 💎 LIVE DEMO 💎 ✨
Install
Install the components using npm:
$ npm install --save react-voice-components
Usage
- Import components:
import { VoicePlayer, VoiceRecognition } from 'react-voice-components'
- Use it:
ReactDOM.render(
<VoicePlayer
play
text="React voice player demonstration"
/>,
document.getElementById('root')
)
API
<VoicePlayer />
Provides you a simple React component to do speech synthesis (text to speech).
Options
| Property | Options | Description |
|---|---|---|
| play | boolean | Specifies if the speech should be played when mounted. |
| pause | boolean | Specifies if the speech should pause |
| text | string | Specifies the text that shall be spoken. |
| lang |
en-US, en-GB, es-ES, fr-FR, it-IT, de-DE, ja-JP, pt-BR, zh-CN
|
Specifies the accent and language the speech will be spoken. |
Event Callbacks
| Property | Description |
|---|---|
| onStart | Runs when the speech starts to be spoken. |
| onEnd | Runs when the speech completes to be spoken. |
| onPause | Runs when te speech is paused. |
| onResume | Runs when the speech is resumed. |
<VoiceRecognition />
Provides you a simple React component to do voice recognition (speech to text).
Options
| Property | Options | Description |
|---|---|---|
| continuous | boolean | Specifies if the recognition should continue when the user pauses while speaking. |
| stop | boolean | Specifies if the recognition should be stoped (when used with continuous=true) |
Event Callbacks
| Property | Description |
|---|---|
| onStart | Runs when the recognition starts. |
| onEnd | Runs when the recognition ends. |
| onError | Runs when there is a recognition error. |
| onResult | Runs when there is a recognition result. |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
LICENSE
MIT (c) 2017 Guilherme Rv Coelho
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].