feat(examples): update getting-started examples to use @superdoc/react

- Update react example to use SuperDocEditor component
- Remove manual lifecycle management (DocumentEditor.jsx)
- Rename typescript example to react-typescript
- Move react-wrapper example to getting-started/react-typescript

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: tupizz

examples/react-wrapper/index.html …ting-started/react-typescript/index.htmlexamples/react-wrapper/index.html renamed to examples/getting-started/react-typescript/index.html examples/react-wrapper/index.html renamed to examples/getting-started/react-typescript/index.html

@@ -1,18 +1,21 @@
 {
-  "name": "react-wrapper-example",
+  "name": "react-typescript-example",
   "private": true,
   "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite"
   },
   "dependencies": {
-    "@superdoc/react": "workspace:*",
-    "react": "catalog:",
-    "react-dom": "catalog:"
+    "@superdoc/react": "*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.4",
+    "typescript": "^5.7.0",
     "vite": "^6.2.0"
   }
 }

examples/react-wrapper/package.json …ng-started/react-typescript/package.jsonexamples/react-wrapper/package.json renamed to examples/getting-started/react-typescript/package.json examples/react-wrapper/package.json renamed to examples/getting-started/react-typescript/package.json

@@ -7,10 +7,9 @@
     "dev": "vite"
   },
   "dependencies": {
+    "@superdoc/react": "*",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "styled-jsx": "^5.1.7",
-    "superdoc": "0.20.0-next.13"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.4",

examples/react-wrapper/public/sample.docx …rted/react-typescript/public/sample.docxexamples/react-wrapper/public/sample.docx renamed to examples/getting-started/react-typescript/public/sample.docx examples/react-wrapper/public/sample.docx renamed to examples/getting-started/react-typescript/public/sample.docx

@@ -1,9 +1,11 @@
 import { useRef, useState } from 'react';
-import DocumentEditor from './components/DocumentEditor';
+import { SuperDocEditor } from '@superdoc/react';
+import '@superdoc/react/style.css';
 
 function App() {
   const [documentFile, setDocumentFile] = useState(null);
   const fileInputRef = useRef(null);
+  const editorRef = useRef(null);
 
   const handleFileChange = (event) => {
     const file = event.target.files?.[0];
@@ -12,34 +14,53 @@ function App() {
     }
   };
 
-  const handleEditorReady = (editor) => {
-    console.log('SuperDoc editor is ready', editor);
+  const handleExport = async () => {
+    await editorRef.current?.getInstance()?.export({ triggerDownload: true });
   };
 
   return (
     <div className="app">
       <header>
-        <h1>SuperDoc Example</h1>
+        <h1>SuperDoc React Example</h1>
         <button onClick={() => fileInputRef.current?.click()}>
           Load Document
         </button>
         <input
           type="file"
           ref={fileInputRef}
-          accept=".docx, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+          accept=".docx"
           onChange={handleFileChange}
           style={{ display: 'none' }}
         />
+        {documentFile && (
+          <button onClick={handleExport}>
+            Export DOCX
+          </button>
+        )}
       </header>
 
       <main>
-        <DocumentEditor
-          initialData={documentFile}
-          onEditorReady={handleEditorReady}
-        />
+        {documentFile ? (
+          <SuperDocEditor
+            ref={editorRef}
+            document={documentFile}
+            documentMode="editing"
+            rulers
+            onReady={({ superdoc }) => console.log('SuperDoc ready', superdoc)}
+            onEditorCreate={({ editor }) => console.log('Editor created', editor)}
+            renderLoading={() => (
+              <div className="loading">Loading document...</div>
+            )}
+            style={{ height: '100%' }}
+          />
+        ) : (
+          <div className="empty-state">
+            <p>Click "Load Document" to open a .docx file</p>
+          </div>
+        )}
       </main>
 
-      <style jsx>{`
+      <style>{`
         .app {
           height: 100vh;
           display: flex;
@@ -67,6 +88,20 @@ function App() {
           flex: 1;
           min-height: 0;
         }
+        .empty-state {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          color: #666;
+        }
+        .loading {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          color: #666;
+        }
       `}</style>
     </div>
   );