react-voice-controlled
v1.0.5
Published
A react library that can make any react app voice controllabe without any additional code
Downloads
3
Readme
react-voice-controlled (V 1.0.2) 🎙️💻
A React library that enables voice controls for your React apps without the need of extra code.
Table of Contents
Installation
npm install react-voice-controlled
or
yarn add react-voice-controlled
Usage
Download this library using anyone of the above commands.
Import
InitializeVoiceControls
fromreact-voice-controlled
in your React app.Simply call
InitializeVoiceControls
in your App js to enable voice controls.
Supportted Browsers
As this library using speech recognition
API of javascript and this API donot support many browsers.
So, this library will also work in some browsers as given below:-
- Chrome
- Microsoft Edge
- Safari
- WebView Android
- Chrome Android
- Safari iOS
- Samsung Internet
Example and Demo
import React from 'react';
import {InitializeVoiceControls} from 'react-voice-controlled';
const App = ()=> {
<>
<InitializeVoiceControls
commands={{
navigation: [
'go to',
'navigate to'
],
scrolling: [
'scroll by',
'scroll to',
'move by',
'scroll by'
]
}}
enableNavigationControls
enableScrollingControls
routes={[
'/',
'/about',
'/contact'
]}
/>
<div className="APP">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam officia ab beatae iure ex doloremque odit, vel illo eligendi totam at, ullam asperiores vero. Minima iste ipsum atque odit sint.
</div>
}
export default App;
Arguments
commands:
Object {scrolling: string[], navigation: string[]}
optional required according to enableNavigationCommands and enableScrollingCommands
An object containing the commands you want to use.
default: { navigation: [], scrolling: ['scroll by', 'scroll to', 'move by', 'scroll by',"scroll down", "move down", "scroll up", "move up"] }
when enableNavigationCommands and enableScrollingCommands are true
accordingly.
enableNavigationControls:
boolean
optional
required with routes and navigation commands
A boolean value that determines whether you want to enable navigation controls.
default: false
enableScrollingControls:
boolean
optional
required with scrolling commmands
A boolean value that determines whether you want to enable scrolling controls.
default: false
routes:
string[]
optional
required with enableNavigationControls
An array of strings that contains the routes you want to use.
default: []