react-voicey (V 2.0.0) 🎙️💻

A React library that enables voice controls for your React apps without the need of extra code.

Table of Contents

• Installation
• Usage
• Arguments

Installation

npm install react-voicey or yarn add react-voicey

Usage

1. Download this library using anyone of the above commands.

2. Import InitializeVoiceControls from react-voicey in your React app.

3. 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:-

1. Chrome
2. Microsoft Edge
3. Safari
4. WebView Android
5. Chrome Android
6. Safari iOS
7. Samsung Internet

Example and Demo

ReactJs

import React from 'react';
import {InitializeVoiceControls} from 'react-voicey';

const App = ()=> {
    <>
    <InitializeVoiceControls
        enableNavigationControls
        enableScrollingControls
        />
    <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;

NextJS

# _app.jsx

import '@/styles/globals.css';
import dynamic from 'next/dynamic';

export default function App({ Component, pageProps }: AppProps) {

const InitializeVoiceControls = dynamic(
    () => import('react-voicey').then(mod => mod.InitializeVoiceControls),
    { ssr: false }
);

return (
    <>
        <InitializeVoiceControls
            enableNavigationControls
            enableScrollingControls
        />
        <Navbar />
        <Component {...pageProps} />
        <Footer />
    </>
);
}

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: ["navigate to", "go to"], 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