React SDK

@tts2go/react provides a context provider, a useTTS hook, and a ready-made TTSButton component.

Installation

npm install @tts2go/react

Setup

Wrap your app (or the part that uses TTS) with TTS2GoProvider:

import { TTS2GoProvider } from "@tts2go/react";

function App() {
  return (
    <TTS2GoProvider config={{
      apiKey: "tts_your_api_key",
      projectId: "your-project-id",
    }}>
      {/* your app */}
    </TTS2GoProvider>
  );
}

TTSButton

Drop-in button that handles playback states, loading, and error display:

import { TTSButton } from "@tts2go/react";

function Article() {
  const text = "Hello, this is a TTS demo.";
  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId="voice_abc123" />
    </div>
  );
}

Props

Prop	Type	Description
`content`	`string`	Text to convert to speech (required)
`voiceId`	`string`	Voice identifier (required)
`className`	`string`	CSS class for the button
`size`	`number`	Icon size in px (default: 24)

useTTS Hook

For full control, use the useTTS hook directly:

import { useTTS } from "@tts2go/react";

function CustomPlayer({ text }: { text: string }) {
  const { status, url, error, play, stop, pause } = useTTS(text, "voice_abc123");

  return (
    <div>
      <p>Status: {status}</p>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button onClick={play} disabled={status === "loading"}>
        Play
      </button>
      <button onClick={pause}>Pause</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

Return value

Property	Type	Description
`status`	`TTSStatus`	`"idle" \| "loading" \| "playing" \| "paused" \| "error" \| "fallback"`
`url`	`string \| null`	CDN URL once audio is generated
`error`	`string \| null`	Error message if generation/playback failed
`play`	`() => void`	Start playback (generates audio if needed)
`stop`	`() => void`	Stop playback and reset
`pause`	`() => void`	Pause playback

Status flow

idle → loading → playing → idle
                ↘ error
                ↘ fallback → idle

If generation fails and the browser supports speechSynthesis, the SDK falls back to the browser's built-in TTS engine automatically.

TypeScript

All exports are fully typed. Key types re-exported from @tts2go/core:

import type { TTS2GoConfig, TTSStatus } from "@tts2go/react";
import type { UseTTSReturn, TTSButtonProps } from "@tts2go/react";