React Integration

npm install @superdoc-dev/react @superdoc-dev/fonts

import { SuperDocEditor } from '@superdoc-dev/react';
import { superdocFonts } from '@superdoc-dev/fonts';
import '@superdoc-dev/react/style.css';

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

<SuperDocEditor document={file} documentMode="editing" />

<SuperDocEditor document={file} role="editor" />

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

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>
  );
}