> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Dictation SDK React Integration

> Use DictationProvider and Dictation in React applications

## 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](../installation) of `@suki-sdk/dictation-react` and `@suki-sdk/core`
* A `DictationClient` instance built with [Authentication](./authentication)

## Wrap the tree once

```jsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
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

```jsx React expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
{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.

<Tip>
  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.
</Tip>

## Next steps

* [Modes and callbacks](./modes-and-callbacks) for `mode`, `fieldId`, and callbacks
* [JavaScript integration](./javascript-integration) for imperative `show()` details
* [Quickstart](../quickstart) for an end-to-end example