React API
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 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 shows. React 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. 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 before you change the document. Load, Save and Remove the Editor in the Integration Guide shows the code, and Events 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 class of the ASP.NET Core HTML helper, whose reference describes the properties in detail. Digital Signatures shows the signature process.
Use the Viewer From Your Code
The viewer raises the documentViewerLoaded event on the window object when the TXDocumentViewer object is ready. Document Viewer with React handles it in useEffect to load documents.