For React applications, DS Server provides 2 different npm packages:
The following prerequisites must be fulfilled to use the DS Server React npm packages.
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:
The following React versions have been tested:
17.0.0
17.0.1
This library offers a HTML5 based document editor to create and modify MS Word documents browser including Google Chrome, Firefox, Safari and Edge.
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>
);
}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>| 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. |
| 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.). |
| Property | Value Type | Description |
|---|---|---|
| clientID | string | Sets the OAuth client ID. |
| clientSecret | string | Sets the OAuth client secret. |
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:
This library provides a document viewer to render documents in any browser including Google Chrome, Firefox, Safari and Edge.
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;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>| 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. |
<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. |
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: