react-text-to-speech/dist/types.d.ts

An easy-to-use React.js library that leverages the Web Speech API to convert text to speech.

import { ReactNode, CSSProperties, JSX, DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';

type DirectiveEvent = "change" | "pause" | null;
type HighlightMode = "word" | "sentence" | "line" | "paragraph";
type HighlightProps = {
    className?: string;
    id?: string;
    style?: CSSProperties;
    title?: string;
};
type NodeProps = PropsWithChildren<{
    key?: string;
    className?: string;
}>;
type SpeakingWord = {
    index: string;
    charIndex: number;
    length: number;
} | null;
type SpeakProps = SpeechSynthesisUtteranceProps & {
    text: ReactNode;
};
type SpeechStatus = "started" | "paused" | "stopped" | "queued";
type SpeechSynthesisBoundaryEvent = {
    progress: number;
};
type SpeechSynthesisBoundaryEventHandler = (event: SpeechSynthesisBoundaryEvent) => void;
type SpeechSynthesisErrorHandler = (error: Error) => void;
type SpeechSynthesisEventHandler = () => void;
type SpeechSynthesisEventName = "word" | "sentence";
type SpeechSynthesisUtteranceProps = {
    pitch?: number;
    rate?: number;
    volume?: number;
    lang?: string;
    voiceURI?: string | string[];
};
type UpdateMode = "immediate" | "throttle" | "debounce";
type UseSpeakOptions = {
    preserveUtteranceQueue?: boolean;
    highlightText?: boolean;
    showOnlyHighlightedText?: boolean;
    highlightMode?: HighlightMode;
    highlightProps?: HighlightProps;
    highlightContainerProps?: HighlightProps;
    enableDirectives?: boolean;
    updateMode?: UpdateMode;
    updateDelay?: number;
    maxChunkSize?: number;
    onError?: SpeechSynthesisErrorHandler;
    onStart?: SpeechSynthesisEventHandler;
    onResume?: SpeechSynthesisEventHandler;
    onPause?: SpeechSynthesisEventHandler;
    onStop?: SpeechSynthesisEventHandler;
    onBoundary?: SpeechSynthesisBoundaryEventHandler;
    onQueueChange?: QueueChangeEventHandler;
};
type UseSpeechOptions = SpeakProps & UseSpeakOptions & {
    autoPlay?: boolean;
};
type UseSpeechOptionsInternal = UseSpeechOptions & {
    id?: string;
};
type IconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
type Button = JSX.Element | string | null;
type Children = (childrenOptions: ChildrenOptions) => ReactNode;
type ChildrenOptions = {
    speechStatus?: SpeechStatus;
    isInQueue?: boolean;
    start?: VoidFunction;
    pause?: VoidFunction;
    stop?: VoidFunction;
};
type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
type HighlightedTextProps = DivProps & {
    id: string;
};
type SpeechProps = UseSpeechOptionsInternal & {
    startBtn?: Button;
    pauseBtn?: Button;
    stopBtn?: Button;
    useStopOverPause?: boolean;
    enableConditionalHighlight?: boolean;
    props?: DivProps;
    children?: Children;
};
type VoidFunction = () => void;
type QueueChangeEventHandler = (queue: SpeechUtterancesQueue) => void;
type SpeechQueue = SpeechQueueItem[];
type SpeechQueueItem = {
    text: string;
    utterance: SpeechSynthesisUtterance;
    setSpeechStatus: SpeechStatusUpdater;
};
type SpeechStatusUpdater = (newStatus: SpeechStatus) => void;
type SpeechUtterancesQueue = Partial<SpeechSynthesisUtterance>[];
type Index = string | number;
type State = {
    stopReason: "auto" | "change" | "manual";
};
type Words = string | Words[];

export type { Button, Children, ChildrenOptions, DirectiveEvent, DivProps, HighlightMode, HighlightProps, HighlightedTextProps, IconProps, Index, NodeProps, QueueChangeEventHandler, SpeakProps, SpeakingWord, SpeechProps, SpeechQueue, SpeechQueueItem, SpeechStatus, SpeechStatusUpdater, SpeechSynthesisBoundaryEvent, SpeechSynthesisBoundaryEventHandler, SpeechSynthesisErrorHandler, SpeechSynthesisEventHandler, SpeechSynthesisEventName, SpeechSynthesisUtteranceProps, SpeechUtterancesQueue, State, UpdateMode, UseSpeakOptions, UseSpeechOptions, UseSpeechOptionsInternal, VoidFunction, Words };