@docx-editor.dev/react
React adapter for the DOCX editor: the packaged editor component, composition primitives, hooks, and compound chrome.
Install
Install the React adapter and its peer dependency:
npm install @docx-editor.dev/react @docx-editor.dev/coreThe adapter uses @docx-editor.dev/core as a peer dependency.
The package includes the string catalog.
Install @docx-editor.dev/pro for tracked changes,
comments, and custom nodes.
Install @docx-editor.dev/editor-api to automate
documents from code.
Quickstart
Render <DocxEditor> with DOCX bytes:
import { DocxEditor } from '@docx-editor.dev/react';
export default function App() {
return <DocxEditor document={docxBytes} />;
}<DocxEditor> renders the title bar, menu, toolbar, navigation pane,
hyperlink popover, context menu, and editable document.
With the Next.js App Router, render the editor inside a "use client"
component.
The editor requires browser APIs and does not support server rendering.
Package exports
DocxEditorprovides the packaged editor and compound parts. Parts includeDocxEditor.Root,DocxEditor.Viewport,DocxEditor.Content,DocxEditor.Toolbar,DocxEditor.Menu,DocxEditor.Navigation,DocxEditor.HyperLink, andDocxEditor.ContextMenu.- Hooks include
useDocxEditor,useEditorState,useEditorCommand,useEditorEvent,usePageSetup,useParagraphIndent, anduseFontFamily. - Top-level components include
DocxEditorRoot,DocxEditorViewport,DocxEditorContent,DocxEditorToolbar,DocxEditorMenu,DocxEditorNavigation, andDocxEditorPageSetupDialog.
@docx-editor.dev/pro provides the licensed review module
and sidebar.
The React adapter does not export these features.
Import components, hooks, and engine helpers from the package root.
The package does not provide /ui, /hooks, or /dialogs subpaths.
Provider primitives
Use the provider primitives when you need custom chrome:
import { DocxEditor } from '@docx-editor.dev/react';
export function CustomFrame({ bytes }: { bytes: Uint8Array }) {
return (
<DocxEditor.Root document={bytes}>
<DocxEditor.Toolbar />
<DocxEditor.Viewport>
<DocxEditor.Navigation />
<DocxEditor.Content />
<DocxEditor.HyperLink />
<DocxEditor.ContextMenu />
</DocxEditor.Viewport>
</DocxEditor.Root>
);
}Toolbar
Use DocxEditorToolbar or its DocxEditor.Toolbar compound alias.
This example adds a custom Bold button:
import { DocxEditor, useEditorCommand } from '@docx-editor.dev/react';
function BoldButton() {
const bold = useEditorCommand('text.bold');
return (
<button
// Prevent toolbar actions from moving the document caret.
onMouseDown={(event) => event.preventDefault()}
onClick={() => bold.execute()}
disabled={!bold.isEnabled}
>
Bold
</button>
);
}
export function ToolbarOnly({ bytes }: { bytes: Uint8Array }) {
return (
<DocxEditor.Root document={bytes}>
<DocxEditor.Toolbar>
<BoldButton />
</DocxEditor.Toolbar>
<DocxEditor.Viewport>
<DocxEditor.Content />
</DocxEditor.Viewport>
</DocxEditor.Root>
);
}Import useEditorCommand, useEditorState, and useFontFamily from the
package root.
Editing API
Use @docx-editor.dev/editor-api/browser to control the open document.
Pass the React adapter's editor instance to the Office.js-compatible API:
import { useDocxEditor } from '@docx-editor.dev/react';
import { DocxEditor as BrowserDocxEditor } from '@docx-editor.dev/editor-api/browser';
function AutomationButton() {
const editor = useDocxEditor();
function run() {
if (!editor) return;
const runtime = BrowserDocxEditor.createBrowser(editor);
// Use `runtime`, then call `runtime.dispose()`.
}
return (
<button disabled={!editor} onClick={run}>
Run automation
</button>
);
}For object model details, see the Editing API documentation.