Dictation SDK React Integration

Overview

The React package (@suki-sdk/dictation-react) wraps the same DictationClient you use in JavaScript. You provide the client once via DictationProvider, then render Dictation where you need it. This guide follows React Integration in Suki Dictation SDK.md.

Prerequisites

Installation of @suki-sdk/dictation-react and @suki-sdk/core
A DictationClient instance built with Authentication

Wrap the tree once

React

import { DictationProvider } from "@suki-sdk/dictation-react";

<DictationProvider client={client}>
  {/* your app */}
</DictationProvider>

Create client with new DictationClient({ authManager }) after you construct SukiAuthManager.

Render dictation conditionally

React

{activeField === "notes" && (
  <Dictation
    fieldId="notes"
    mode="in-field"
    initialText={value}
    onSubmit={handleSubmit}
  />
)}

Unmounting and hide()

When the Dictation component unmounts, the SDK automatically calls hide(). You do not need to call hide() yourself for normal React unmount flows.

Use state such as activeFieldId so only one field owns the dictation session at a time. That matches the spec guidance for controlling which input owns dictation.

Next steps

Modes and callbacks for mode, fieldId, and callbacks
JavaScript integration for imperative show() details
Quickstart for an end-to-end example

​Overview

​Prerequisites

​Wrap the tree once

​Render dictation conditionally

​Unmounting and hide()

​Next steps

Overview

Prerequisites

Wrap the tree once

Render dictation conditionally

Unmounting and hide()

Next steps