# React API

> Properties, types and defaults of the DocumentEditor and DocumentViewer React components: the onLoad callback, signature settings and the Vite default import.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > API Reference > React API
- **2191 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/react-api/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/react-api/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/react-api/llms-full.txt

---

`DocumentEditor` and `DocumentViewer` are the React components of the Document Editor and the Document Viewer, each in an npm package of its own. The tables below list every property the components read, with its type, its default value and what it does, taken from the README and the code published with the packages. Keep them at hand while you configure a component in a React application.

Neither component has methods of its own. Once it has loaded, your code works with the document through the JavaScript objects `TXTextControl` and `TXDocumentViewer`, which [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-api/llms-full.txt) introduces.

### Packages

| Package | Version | Component | `react` and `react-dom` |
|---|---|---|---|
| `@txtextcontrol/tx-react-document-editor` | 34.0.0 | `DocumentEditor` | `^19.2.0` |
| `@txtextcontrol/tx-react-document-viewer` | 34.0.0 | `DocumentViewer` | `^18.2.0` |

Each package has a default export, the component, and no named exports. Both packages are CommonJS modules, so in a project created with Vite 8 the default import returns the whole module object and the component is its `default` property, as [Import the Components in Vite 8](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/react/#import-the-components-in-vite-8) shows. [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/llms-full.txt) in the Installation Guide explains the React versions the packages declare.

### DocumentEditor

`webSocketURL` is required: without it, the component throws the error "Please provide a WebSocket URL." when it is mounted. The size is set with `style`, not with `width` and `height` properties.

| Property | Type | Default | Description |
|---|---|---|---|
| `webSocketURL` | string | `null` | The WebSocket URL of the backend, such as `wss://localhost:7118/api/TXWebSocket` |
| `style` | object | `{ width: "1000px", height: "800px", display: "inline-block" }` | The style of the container element; `width` and `height` take pixel or percent values |
| `editMode` | string | `"Edit"` | Whether the text can be edited, only selected or only read: `"Edit"`, `"ReadAndSelect"`, `"ReadOnly"` or `"UsePassword"` |
| `contextMenusEnabled` | boolean | `true` | Whether a right-click opens a context menu |
| `culture` | string | `""` | The culture for formatting, such as dates and times, for example `"de-DE"` |
| `uiCulture` | string | `""` | The culture of the user interface strings, for example `"en-US"` |
| `userNames` | string\[\] | `[]` | The users who can edit the editable regions assigned to them when the document is read-only |
| `formattingPrinter` | string | `""` | The name of a printer whose text dimensions are used to format the document |
| `reconnectTimeout` | number | `0` | The time in seconds after which the editor stops trying to reconnect when the connection is lost |
| `onLoad` | function | none | Called when the editor script has loaded and the `TXTextControl` object exists |

The React component has fewer settings than the Angular component: it passes only the properties above to [TXTextControl.init](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/init-method/llms-full.txt). Other settings, such as control characters or table grid lines, are properties of the `TXTextControl` object that your code sets after the editor has loaded.

#### The onLoad Callback

The component loads the editor script from the backend when it is mounted: it replaces `ws` or `wss` in `webSocketURL` with `http` or `https`, appends `/GetResource?name=tx-document-editor.min.js` to the path and adds the query string of `webSocketURL`, such as an access token. When the script has loaded, it calls `TXTextControl.init` and then `onLoad`.

At this point, the `TXTextControl` object exists, but the document isn't ready yet: attach a handler to the editor's `textControlLoaded` event with [addEventListener](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/addeventlistener-method/llms-full.txt) before you change the document. [Load, Save and Remove the Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/react/#load-save-and-remove-the-editor) in the Integration Guide shows the code, and [Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/events/llms-full.txt) lists the order of the events during initialization.

### DocumentViewer

`width`, `height` and `basePath` are required.

| Property | Type | Default | Description |
|---|---|---|---|
| `width` | string | none | The width of the viewer, such as `"1024px"` |
| `height` | string | none | The height of the viewer, such as `"1024px"` |
| `basePath` | string | none | The URL of the backend that hosts the Document Viewer, such as `https://localhost:7275` |
| `documentData` | string | none | The document to show, as a Base64 string |
| `documentPath` | string | none | The name of the document that the viewer shows |
| `documentLoadSettings` | object | none | `loadEmbeddedComments` loads the comments of the document as annotations; `pdfjs` holds `workerSourcePath` and `librarySourcePath`, the paths of the PDF.js worker and library |
| `dock` | string | `"Fill"` | How the viewer is docked: `"Fill"` or `"Window"` |
| `toolbarDocked` | boolean | `true` | Whether the toolbar is docked or floating |
| `isSelectionActivated` | boolean | `true` | Whether users can select and copy text |
| `showThumbnailPane` | boolean | `true` | Whether the sidebar with page thumbnails is shown |
| `signatureSettings` | object | see below | The settings of the signature process |
| `userNames` | string\[\] | `[]` | An array of user names; the README describes them as the users who have access to editable regions |
| `resources` | object | the English strings | Replacements for the strings the viewer displays, as key-value pairs |
| `onLoad` | function | none | Called when the viewer script has loaded |

The component requests the viewer script from `<basePath>/TextControl/GetResource?Resource=minimized.tx-viewer.min.js` and passes `basePath` to the viewer without its query string. A query string in `basePath` is added only to the request of the script.

#### signatureSettings

| Property | Type | Default | Description |
|---|---|---|---|
| `showSignatureBar` | boolean | `false` | Whether the signature bar is shown |
| `ownerName` | string | `""` | The name of the owner who requests the signature |
| `signerName` | string | `""` | The name of the signer |
| `signerInitials` | string | `""` | The initials of the signer |
| `signatureBoxName` | string | `"txsign"` | The name of the signature box in the document; ignored when `signatureBoxes` isn't empty |
| `signatureBoxes` | object\[\] | `[]` | Several signature boxes, each with `name`, `style` (`"Signature"` or `"Initials"`, `"Signature"` by default) and `signingRequired` (`true` by default) |
| `uniqueId` | string | `""` | The unique ID of the signature |
| `redirectUrlAfterSignature` | string | `""` | The URL of an endpoint to which the viewer's controller posts the signature data after a successful signature |
| `customSigning` | boolean | `false` | Whether your own code handles the signing process |

The .NET counterpart is the [SignatureSettings](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web-mvc-documentviewer/signaturesettings/llms-full.txt) class of the ASP.NET Core HTML helper, whose reference describes the properties in detail. [Digital Signatures](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/digital-signatures/llms-full.txt) shows the signature process.

#### Use the Viewer From Your Code

The viewer raises the `documentViewerLoaded` event on the `window` object when the [TXDocumentViewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript-document-viewer/txdocumentviewer/llms-full.txt) object is ready. [Document Viewer with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/#load-documents-with-javascript) handles it in `useEffect` to load documents.

### Related Pages

- [Getting Started: Document Editor with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt): the first React application with the editor and its backend.
- [Getting Started: Document Viewer with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-viewer/react/llms-full.txt): the viewer in a React application.
- [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/react/llms-full.txt): the Integration Guide for React applications.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/javascript-api/llms-full.txt): how the `TXTextControl` object works, with callbacks and promises.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-viewer/javascript-api/llms-full.txt): the `TXDocumentViewer` object of the Document Viewer.

---

## Nearby

- **Previous:** [Angular API](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/angular-api/llms-full.txt)
- **Next:** [REST API](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/rest-api/llms-full.txt)