react-dictate-button
Version:
A button to start dictation using Web Speech API, with an easy to understand event lifecycle.
129 lines (111 loc) • 5.4 kB
TypeScript
import * as React from 'react';
import React__default, { ReactNode, MouseEventHandler } from 'react';
type TypedEventHandler<T> = (event: T) => void;
type DictateEventHandler = TypedEventHandler<{
result?: {
confidence: number;
transcript: string;
} | undefined;
type: 'dictate';
}>;
type EndEventHandler = TypedEventHandler<{
type: 'end';
}>;
type ErrorEventHandler = TypedEventHandler<SpeechRecognitionErrorEvent>;
type ProgressEventHandler = TypedEventHandler<{
abortable: boolean;
results?: readonly {
confidence: number;
transcript: string;
}[] | undefined;
type: 'progress';
}>;
type RawEventHandler = TypedEventHandler<Event>;
interface SpeechGrammarListPolyfill {
new (): SpeechGrammarList;
}
interface SpeechRecognitionPolyfill {
new (): SpeechRecognition;
}
type StartEventHandler = TypedEventHandler<{
type: 'start';
}>;
type ComposerProps = {
children?: ((context: Readonly<{
abortable: boolean;
readyState: number;
supported: boolean;
}>) => ReactNode) | ReactNode | undefined;
/**
* Sets whether speech recognition is in continuous mode or interactive mode.
*
* Modifying this value during recognition will have no effect until restarted.
*/
continuous?: boolean | undefined;
extra?: Record<string, unknown> | undefined;
grammar?: string | undefined;
lang?: string | undefined;
onDictate?: DictateEventHandler | undefined;
onEnd?: EndEventHandler | undefined;
onError?: ErrorEventHandler | undefined;
onProgress?: ProgressEventHandler | undefined;
onRawEvent?: RawEventHandler | undefined;
onStart?: StartEventHandler | undefined;
speechGrammarList?: SpeechGrammarListPolyfill | undefined;
speechRecognition?: SpeechRecognitionPolyfill | undefined;
started?: boolean | undefined;
};
declare const Composer: ({ children, continuous, extra, grammar, lang, onDictate, onEnd, onError, onProgress, onRawEvent, onStart, speechGrammarList, speechRecognition, started }: ComposerProps) => React__default.JSX.Element;
type DictateButtonProps = {
children?: ((context: Readonly<{
readyState: number | undefined;
}>) => ReactNode) | ReactNode | undefined;
className?: string | undefined;
continuous?: boolean | undefined;
disabled?: boolean | undefined;
extra?: Record<string, unknown> | undefined;
grammar?: string | undefined;
lang?: string | undefined;
onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
onDictate?: DictateEventHandler | undefined;
onEnd?: EndEventHandler | undefined;
onError?: ErrorEventHandler | undefined;
onProgress?: ProgressEventHandler | undefined;
onRawEvent?: RawEventHandler | undefined;
onStart?: StartEventHandler | undefined;
speechGrammarList?: SpeechGrammarListPolyfill | undefined;
speechRecognition?: SpeechRecognitionPolyfill | undefined;
};
declare const DictateButton: ({ children, className, continuous, disabled, extra, grammar, lang, onClick, onDictate, onEnd, onError, onProgress, onRawEvent, onStart, speechGrammarList, speechRecognition }: DictateButtonProps) => React__default.JSX.Element;
type DictateCheckboxProps = {
children?: ((context: Readonly<{
readyState: number;
}>) => ReactNode) | ReactNode | undefined;
className?: string | undefined;
continuous?: boolean | undefined;
disabled?: boolean | undefined;
extra?: Record<string, unknown> | undefined;
grammar?: string | undefined;
lang?: string | undefined;
onDictate?: DictateEventHandler | undefined;
onEnd?: EndEventHandler | undefined;
onError?: ErrorEventHandler | undefined;
onProgress?: ProgressEventHandler | undefined;
onRawEvent?: RawEventHandler | undefined;
onStart?: StartEventHandler | undefined;
speechGrammarList?: SpeechGrammarListPolyfill | undefined;
speechRecognition?: SpeechRecognitionPolyfill | undefined;
};
declare const DictateCheckbox: ({ children, className, continuous, disabled, extra, grammar, lang, onDictate, onEnd, onError, onProgress, onRawEvent, onStart, speechGrammarList, speechRecognition }: DictateCheckboxProps) => React__default.JSX.Element;
declare function useAbortable(): readonly [boolean];
declare function useReadyState(): readonly [number];
declare function useSupported(): readonly [boolean];
/** @deprecated Use `useAbortable`, `useReadyState`, and `useSupported` hooks instead. */
declare const Context: React.Context<Readonly<{
abortable: boolean;
readyState: number;
supported: boolean;
}>>;
/** @deprecated Use `import { DictateButton } from 'react-dictate-button'` instead. */
declare const DictateButton_: ({ children, className, continuous, disabled, extra, grammar, lang, onClick, onDictate, onEnd, onError, onProgress, onRawEvent, onStart, speechGrammarList, speechRecognition }: DictateButtonProps) => React.JSX.Element;
export { Composer, type ComposerProps, Context, DictateButton, type DictateButtonProps, DictateCheckbox, type DictateCheckboxProps, type DictateEventHandler, type EndEventHandler, type ErrorEventHandler, type ProgressEventHandler, type RawEventHandler, type SpeechGrammarListPolyfill, type SpeechRecognitionPolyfill, type StartEventHandler, type TypedEventHandler, DictateButton_ as default, useAbortable, useReadyState, useSupported };