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.

React API