> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# React Integration

SuperDoc provides `@superdoc-dev/react`: a first-party wrapper with lifecycle management, SSR safety, and React Strict Mode compatibility.

## Install

```bash theme={null}
npm install @superdoc-dev/react
```

<Note>
  `superdoc` is included as a dependency: no need to install it separately.
</Note>

## Quick start

```jsx theme={null}
import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

function App() {
  return (
    <SuperDocEditor
      document={file}
      documentMode="editing"
      onReady={() => console.log('Editor ready!')}
    />
  );
}
```

## Core concepts

### Document modes

| Mode         | Description               |
| ------------ | ------------------------- |
| `editing`    | Full editing capabilities |
| `viewing`    | Read-only presentation    |
| `suggesting` | Track changes mode        |

```jsx theme={null}
<SuperDocEditor document={file} documentMode="editing" />
```

### User roles

| Role        | Can Edit | Can Suggest | Can View |
| ----------- | -------- | ----------- | -------- |
| `editor`    | Yes      | Yes         | Yes      |
| `suggester` | No       | Yes         | Yes      |
| `viewer`    | No       | No          | Yes      |

```jsx theme={null}
<SuperDocEditor document={file} role="editor" />
```

### Responsive zoom

Pass `zoom` with `mode: 'fit-width'` to keep the document fitted to its container as it resizes. SuperDoc observes the container for you; no resize listeners needed. Calling `setZoom()` (or the user picking a percentage in the toolbar) switches back to manual mode.

```jsx theme={null}
<SuperDocEditor
  document={file}
  zoom={{
    mode: 'fit-width',
    fitWidth: { min: 35, max: 100, padding: 24 },
  }}
  onZoomChange={({ zoom, mode }) => console.log(`Zoom: ${zoom}% (${mode})`)}
/>
```

For custom behavior, listen to `onViewportChange` instead and apply your own zoom with `getInstance().setZoom()`. See [zoom configuration](/editor/superdoc/configuration#param-zoom).

## Handle file uploads

```jsx theme={null}
import { useState } from 'react';
import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

function FileEditor() {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    const selected = e.target.files?.[0];
    if (selected) setFile(selected);
  };

  return (
    <div>
      <input type="file" accept=".docx" onChange={handleFileChange} />
      {file && (
        <SuperDocEditor
          document={file}
          user={{ name: 'User', email: 'user@company.com' }}
        />
      )}
    </div>
  );
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="React API Reference" icon="atom" href="/editor/react/overview">
    Props, ref API, TypeScript types, and patterns
  </Card>

  <Card title="Custom UI" icon="layout-dashboard" href="/editor/custom-ui/overview">
    Build custom toolbar, comments sidebar, and review panel with typed React hooks
  </Card>

  <Card title="Configuration" icon="cog" href="/editor/superdoc/configuration">
    Full SuperDoc configuration options
  </Card>

  <Card title="Collaboration" icon="users" href="/editor/collaboration/overview">
    Real-time collaboration setup
  </Card>

  <Card title="React Example" icon="github" href="https://github.com/superdoc-dev/superdoc/tree/main/examples/getting-started/react">
    React + TypeScript example
  </Card>

  <Card title="Next.js Example" icon="github" href="https://github.com/superdoc-dev/superdoc/tree/main/examples/getting-started/nextjs">
    Next.js SSR integration
  </Card>
</CardGroup>