React SpeechToText Props

| undefined

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

activeStateEnabled

Specifies whether the UI component changes its visual state as a result of user interaction.

Type:

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

customSpeechRecognizer

Allows you to implement custom speech recognition engines.

Selector: CustomSpeechRecognizer

Type:

CustomSpeechRecognizer

If you want to integrate a custom speech recognition engine, set customSpeechRecognizer.enabled to true. When you implement a custom speech recognizer, SpeechToText no longer does the following:

Listens to user speech.
Updates the component state. Set the SpeechToText state using the customSpeechRecognizer.isListening property.
Calls the onResult and onError handlers.

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: ElementAttr

Type:

Object

Default Value: {}

jQuery

$(function(){
    $("#speechToTextContainer").dxSpeechToText({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-speech-to-text ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-speech-to-text>

import { DxSpeechToTextModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSpeechToTextModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxSpeechToText ...
        :element-attr="speechToTextAttributes">
    </DxSpeechToText>
</template>

<script>
import DxSpeechToText from 'devextreme-vue/speech-to-text';

export default {
    components: {
        DxSpeechToText
    },
    data() {
        return {
            speechToTextAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import SpeechToText from 'devextreme-react/speech-to-text';

class App extends React.Component {
    speechToTextAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <SpeechToText ...
                elementAttr={this.speechToTextAttributes}>
            </SpeechToText>
        );
    }
}
export default App;

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Type:

Default Value: false

height

Specifies the UI component's height.

Type:

Number

|

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

| undefined

Default Value: undefined

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

Type:

Default Value: false

onContentReady

A function that is executed when the UI component is rendered or repainted.

Type:

Function parameters:

e:

ContentReadyEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	SpeechToText	The UI component's instance.

Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function parameters:

e:

DisposingEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	SpeechToText	The UI component's instance.

Default Value: null

onEnd

A function that is executed when the Web Speech API finishes transcription and SpeechToText switches to the initial component state.

Type:

| undefined

Function parameters:

e:

EndEvent

Information about the event.

Object structure:

Name	Type	Description
component	SpeechToText	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: undefined

NOTE

The component does not call this handler if you implement a custom speech recognition engine.

onError

A function that is executed when the Web Speech API encounters an error.

Type:

| undefined

Function parameters:

e:

ErrorEvent

Information about the event.

Object structure:

Name	Type	Description
component	SpeechToText	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: undefined

The following code snippet demonstrates how to implement the notify() utility method to display a Web Speech API error in the onError handler:

jQuery

index.js

$('#speech-to-text').dxSpeechToText({
    onError(e) {
        DevExpress.ui.notify(`Web Speech API encountered an error: ${e.event.error}`);
    }
})

Angular

app.component.html

app.component.ts

<dx-speech-to-text
    (onError)="handleError($event)"
></dx-speech-to-text>

import { DxSpeechToTextComponent, type DxSpeechToTextTypes } from 'devextreme-angular/ui/speech-to-text';
import notify from 'devextreme/ui/notify';

// ...
export class AppComponent {
    handleError(e: DxSpeechToTextTypes.ErrorEvent) {
        notify(`Web Speech API encountered an error: ${e.event.error}`);
    }
}

Vue

App.vue

<template>
    <DxSpeechToText
        @error="handleError"
    />
</template>

<script setup lang="ts">
import { DxSpeechToText, type DxSpeechToTextTypes } from 'devextreme-vue/speech-to-text';
import notify from 'devextreme/ui/notify';

function handleError(e: DxSpeechToTextTypes.ResultEvent) {
    notify(`Web Speech API encountered an error: ${e.event.error}`);
}
</script>

React

App.tsx

import React from 'react';
import { SpeechToText, type SpeechToTextTypes } from 'devextreme-react/speech-to-text';
import notify from 'devextreme/ui/notify';

function handleError(e: DxSpeechToTextTypes.ResultEvent): void {
    notify(`Web Speech API encountered an error: ${e.event.error}`);
}

function App(): JSX.Element {
    return (
        <SpeechToText
            onError={handleError}
        />
    );
}

NOTE

The component does not call this handler if you implement a custom speech recognition engine.

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function parameters:

e:

InitializedEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	SpeechToText	The UI component's instance.

Default Value: null

Angular

app.component.html

app.component.ts

<dx-speech-to-text ...
    (onInitialized)="saveInstance($event)">
</dx-speech-to-text>

import { Component } from "@angular/core";
import SpeechToText from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    speechToTextInstance: SpeechToText;
    saveInstance (e) {
        this.speechToTextInstance = e.component;
    }
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <div>
        <DxSpeechToText ...
            @initialized="saveInstance">
        </DxSpeechToText>
    </div>
</template>

<script>
import DxSpeechToText from 'devextreme-vue/speech-to-text';

export default {
    components: {
        DxSpeechToText
    },
    data: function() {
        return {
            speechToTextInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.speechToTextInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxSpeechToText ...
            @initialized="saveInstance">
        </DxSpeechToText>
    </div>
</template>

<script setup>
import DxSpeechToText from 'devextreme-vue/speech-to-text';

let speechToTextInstance = null;

const saveInstance = (e) => {
    speechToTextInstance = e.component;
}
</script>

React

App.js

import SpeechToText from 'devextreme-react/speech-to-text';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.speechToTextInstance = e.component;
    }

    render() {
        return (
            <div>
                <SpeechToText onInitialized={this.saveInstance} />
            </div>
        );
    }
}

jQuery

Get a UI component Instance in jQuery

Angular

Get a UI component Instance in Angular

Vue

Get a UI component Instance in Vue

React

Get a UI component Instance in React

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function parameters:

e:

OptionChangedEvent

Information about the event.

Object structure:

Name	Type	Description
value	any	The modified property's new value.
previousValue	any	The modified property's previous value.
name	String	The modified property. For nested properties, returns the root-level property.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	SpeechToText	The UI component's instance.

Default Value: null

The following code snippet demonstrates how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#speechToTextContainer").dxSpeechToText({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-speech-to-text ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-speech-to-text>

import { Component } from '@angular/core';
import { type DxSpeechToTextTypes } from 'devextreme-angular/ui/speech-to-text';

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e: DxSpeechToTextTypes.OptionChangedEvent) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxSpeechToTextModule } from 'devextreme-angular/ui/speech-to-text';

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxSpeechToTextModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxSpeechToText ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css'; 
import { DxSpeechToText, type DxSpeechToTextTypes } from 'devextreme-vue/speech-to-text'; 

function handlePropertyChange: function(e: DxSpeechToTextTypes.OptionChangedEvent) {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { SpeechToText, type SpeechToTextTypes } from 'devextreme-react/speech-to-text'; 

function handlePropertyChange(e: SpeechToTextTypes.OptionChangedEvent) {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <SpeechToText ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

onResult

A function that is executed when the Web Speech API returns a result.

Type:

| undefined

Function parameters:

e:

ResultEvent

Information about the event.

Object structure:

Name	Type	Description
component	SpeechToText	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: undefined

The following code snippet demonstrates how to extract transcribed text in the onResult handler:

jQuery

index.js

$('#speech-to-text').dxSpeechToText({
    onResult(e) {
        const resultText = Object.values(e.event.results)
            .map((resultItem) => resultItem[0].transcript)
            .join(" ");
    }
})

Angular

app.component.html

app.component.ts

<dx-speech-to-text
    (onResult)="handleResult($event)"
></dx-speech-to-text>

import { DxSpeechToTextComponent, type DxSpeechToTextTypes } from 'devextreme-angular/ui/speech-to-text';

// ...
export class AppComponent {
    handleResult(e: DxSpeechToTextTypes.ResultEvent) {
        const resultText = Object.values(e.event.results)
            .map((resultItem) => resultItem[0].transcript)
            .join(" ");
    }
}

Vue

App.vue

<template>
    <DxSpeechToText
        @result="handleResult"
    />
</template>

<script setup lang="ts">
import { DxSpeechToText, type DxSpeechToTextTypes } from 'devextreme-vue/speech-to-text';

function handleResult(e: DxSpeechToTextTypes.ResultEvent) {
    const resultText = Object.values(e.event.results)
        .map((resultItem) => resultItem[0].transcript)
        .join(" ");
}
</script>

React

App.tsx

import React from 'react';
import { SpeechToText, type SpeechToTextTypes } from 'devextreme-react/speech-to-text';

function handleResult(e: DxSpeechToTextTypes.ResultEvent): void {
    const resultText = Object.values(e.event.results)
        .map((resultItem) => resultItem[0].transcript)
        .join(" ");
}

function App(): JSX.Element {
    return (
        <SpeechToText
            onResult={handleResult}
        />
    );
}

NOTE

The component does not call this handler if you implement a custom speech recognition engine.

onStartClick

A function that is executed when the SpeechToText button is clicked or tapped in the initial component state.

Type:

| undefined

Function parameters:

e:

StartClickEvent

Information about the event.

Object structure:

Name	Type	Description
component	SpeechToText	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.

Default Value: undefined

onStopClick

A function that is executed when the SpeechToText button is clicked or tapped in the "listening" component state.

Type:

| undefined

Function parameters:

e:

StopClickEvent

Information about the event.

Object structure:

Name	Type	Description
component	SpeechToText	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.

Default Value: undefined

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

speechRecognitionConfig

Configures the Web Speech API (SpeechRecognition properties).

Selector: SpeechRecognitionConfig

Type:

SpeechRecognitionConfig

|

Object

This configuration object allows you to customize SpeechToText functionality.

startIcon

The SpeechToText button icon in the initial component state.

Type:

Default Value: 'micoutline'

startText

The SpeechToText button text in the initial component state.

Type:

Default Value: ''

stopIcon

The SpeechToText button icon in the "listening" component state.

Type:

Default Value: 'stopfilled'

stopText

The SpeechToText button text in the "listening" component state.

Type:

Default Value: ''

stylingMode

Specifies SpeechToText button styling.

Type:

ButtonStyle

Default Value: 'contained'

The following image demonstrates available SpeechToText types (arranged vertically) and styling modes (arranged horizontally):

A grid of DevExtreme SpeechToText components which demonstrate available SpeechToText types and styling modes.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

type

Specifies the SpeechToText button type.

Type:

ButtonType

|

Default Value: 'normal'

The following image demonstrates available SpeechToText types (arranged vertically) and styling modes (arranged horizontally):

A grid of DevExtreme SpeechToText components which demonstrate available SpeechToText types and styling modes.

You can also create a SpeechToText type and define custom CSS rules:

jQuery

index.js

index.css

$(function() {
    $("#speech-to-text").dxSpeechToText({
        // ...
        type: "warning"
    });
});

.dx-button.dx-button-warning {
    background-color: #ffc107;
}

Angular

app.component.html

app.component.css

<dx-speech-to-text ...
    type="warning"
></dx-speech-to-text>

.dx-button.dx-button-warning {
    background-color: #ffc107;
}

Vue

App.vue

<template>
    <DxSpeechToText ...
        type="warning"
    />
</template>

<script>
    // ...
</script>

<style>
    .dx-button.dx-button-warning {
        background-color: #ffc107;
    }
</style>

React

App.tsx

index.css

function App() {
    return (
        <SpeechToText ...
            type="warning" 
        />
    );
};

.dx-button.dx-button-warning {
    background-color: #ffc107;
}

visible

Specifies whether the UI component is visible.

Type:

Default Value: true

width

Specifies the UI component's width.

Type:

Number

|