React

For React applications, DS Server provides 2 different npm packages:

Prerequisites

The following prerequisites must be fulfilled to use the DS Server React npm packages.

Security Profiles

In order to use the DS Server React npm packages, a running DS Server with valid security profiles is required. Learn how to setup the security profiles in this chapter:

Creating Security Profiles

Tested React Version

The following React versions have been tested:

  • 17.0.0

  • 17.0.1

DocumentEditor

This library offers a HTML5 based document editor to create and modify MS Word documents browser including Google Chrome, Firefox, Safari and Edge.

Installation

npm i @txtextcontrol/tx-react-ds-document-editor

Usage

Your App.js could look like this, for example (the only mandatory attributes are width, height, serviceURL and authSettings):

import DocumentEditor from '@txtextcontrol/tx-react-ds-document-editor'

function App() {
return (
    <DocumentEditor
        style={{width:"1024px", height:"1024px" }}
        serviceURL="https://yourdomain.com/DocumentServices"
        authSettings={{
            clientId:"dsserver.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H",
            clientSecret:"41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"}}>
    </DocumentEditor>
);
}

Trial Token

If you are evaluating DS Server and you are using a trial token, replace the ServiceUrl with the demo server location https://trial.dsserver.io.


    <DocumentEditor
        style={{width:"1024px", height:"1024px" }}
        serviceURL="https://trial.dsserver.io"
        authSettings={{
            clientId:"txtextcontrol.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H",
            clientSecret:"41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"}}>
    </DocumentEditor>

Available Properties

Property Value Type Description
style Style object Specifies the style of the editor.
serviceURL string The server which is hosting your installation of Text Control DS Server.
authSettings AuthSettings object Sets the OAuth settings.
editMode string Sets whether the document's text is read-only, can be selected or is editable. Possible values are "Edit", "ReadAndSelect", "ReadOnly" and "UsePassword".
formattingPrinter string The name of a printer the text dimensions and capabilities of which are used to format the document.
contextMenusEnabled bool Sets whether a right click opens a context menu or not.
culture string The culture (e. g. 'en-US'). Affects date and time string formats, for example.
uiCulture string The user interface culture (e. g. 'en-US'). Affects the string resource language.
onLoad Method A method that is called when the JavaScript object TXTextControl is available in the DOM. Sample: onLoad={handleDocumentEditorLoad}.
userNames string[] An array of names specifying users who have access to editable regions. When a document is set to read-only all editable regions that are related to these users can be edited.
reconnectTimeout int Time in seconds before stopping reconnection attempts after a connection loss.

Custom Objects

Style Object

Property Value Type Description
width string Specifies the width of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
height string Specifies the height of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).

AuthSettings Object

Property Value Type Description
clientID string Sets the OAuth client ID.
clientSecret string Sets the OAuth client secret.

API Reference

The DocumentEditor provides a fully-featured JavaScript API that gives access to all document elements to manipulate documents programmatically. The JavaScript API is separately explained in the Reference Guide:

JavaScript API - TXTextControl Object

DocumentViewer

This library provides a document viewer to render documents in any browser including Google Chrome, Firefox, Safari and Edge.

Installation

npm i @txtextcontrol/tx-react-ds-document-viewer

Usage

Your App.js could look like this, for example (the only mandatory attributes are width, height, serviceURL, clientId and clientSecret):

import './App.css';
import DocumentViewer from '@txtextcontrol/tx-react-ds-document-viewer'

function App() {
return (
<DocumentViewer
    width="1024px"
    height="1024px"
    serviceURL="https://yourdomain.com/DocumentServices"
    clientId="dsserver.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    clientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"
    userNames={['user1', 'user2']}>
    </DocumentViewer>
);
}

export default App;

Trial Token

If you are evaluating DS Server and you are using a trial token, replace the ServiceUrl with the demo server location https://trial.dsserver.io.


<DocumentViewer
    width="1000px"
    height="500px"
    serviceURL="https://trial.dsserver.io"
    clientId="txtextcontrol.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    clientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"
    userNames={['user1', 'user2']}>
</DocumentViewer>

Available Properties

Property Value Type Description
width string Specifies the width of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
height string Specifies the height of the document editor. All CSS length values are possible (e. g. "100%" or "20em" etc.).
serviceURL string The service URL.
clientId string Sets the OAuth client ID.
clientSecret string Sets the OAuth client secret.
toolbarDocked bool Specifies whether the toolbar is docked or floating.
documentPath string Specifies the displayed document name.
documentData string Sets the document data encoded as a Base64 string. Supported formats are HTML, RTF, DOC, DOCX, PDF and TX.
isSelectionActivated bool Specifies whether text can be selected and copied.
signatureSettings SignatureSettings Specifies the signature settings.
showThumbnailPane bool Specifies whether the thumbnail sidebar is visible or not.
onLoad Method A method that is called when the JavaScript object TXDocumentViewer is available in the DOM. Sample: onLoad={handleDocumentViewerLoad}.
dock string Specifies how the control is docked. Possible values are "Fill" and "Window".
resources string[][] Specifies resources for the displayed strings.

Custom Objects

SignatureSettings Object

<DocumentViewer
    width = "800px"
    height = "800px"
    serviceURL="https://yourdomain.com/DocumentServices"
    clientID="txtextcontrol.ry4jDzsbXEk0lYqZdY7r5ZxfpMFuor2H"
    clientSecret="41fk3UJGb5fgKwQ5kcf82ak5fcHV8Dr8"
    [signatureSettings] = "{
        showSignatureBar: true,
        signatureBoxName: 'txsign',
        redirectUrlAfterSignature: 'https://www.textcontrol.com',
        ownerName: 'Paul', signerName: 'Jacob',
        signerInitials: 'PK' }">
</DocumentViewer>
Property Value Type Description
ownerName string Specifies the name of the document owner.
signatureBoxName string Specifies the name of the signature boxes to sign.
signerName string Specifies the name of the signer.
signerInitials string Specifies the initials of the signer.
showSignatureBar bool Specifies whether the signature bar is active or not.
uniqueId string Gets or sets a unique document envelope Id.
redirectUrlAfterSignature string Gets or sets an Url that is used for redirection after a successful signing process.

API Reference

The DocumentEditor provides a fully-featured JavaScript API that gives access to all document elements to manipulate documents programmatically. The JavaScript API is separately explained in the Reference Guide:

JavaScript API - TXTextControl Object