React

React applications add the Document Editor and the Document Viewer of DS Server with two npm packages, each exporting one component: DocumentEditor and DocumentViewer. The component loads its script from DS Server, authorizes itself and creates the editor or viewer inside its div element. Below are the properties and defaults of version 5.0.0, read from the README and the published code of each package, and what to change for Vite 8.

For a first application, follow the Getting Started tutorials Document Editor in React and Document Viewer in React.

Packages and Requirements

Both packages need React 19 and are meant for DS Server 5.0.0; the viewer's README says 5.0.0 or later. You also need a security profile of your DS Server, or a trial token, as Overview explains.

Install the Packages

The READMEs create the application with Vite, choosing React as the framework and JavaScript as the language, and then install the package:

npm create vite@latest my-app
cd my-app
npm i @txtextcontrol/tx-react-ds-document-editor
npm i @txtextcontrol/tx-react-ds-document-viewer

Import the Components in Vite 8

The packages are CommonJS modules. A project created with Vite 8 is an ES module project ("type": "module" in package.json), and Vite 8 then returns the whole CommonJS module for a default import instead of the component. The plain default import the READMEs show fails, and React reports an invalid element type. Take the component from the default export when it is there:

import DocumentEditorPackage from '@txtextcontrol/tx-react-ds-document-editor';
import DocumentViewerPackage from '@txtextcontrol/tx-react-ds-document-viewer';

// Vite 8 returns the CommonJS module for a default import
const DocumentEditor = DocumentEditorPackage.default ?? DocumentEditorPackage;
const DocumentViewer = DocumentViewerPackage.default ?? DocumentViewerPackage;

With Vite 7 and other bundlers that return the component itself, the same lines work unchanged. The examples below assume these two constants.

DocumentEditor

Add the editor to App.jsx:

function App() {
  function handleLoad() {
    // TXTextControl exists from now on
    TXTextControl.addEventListener('textControlLoaded', () => {
      console.log('The Document Editor is ready.');
    });
  }

  return (
    <DocumentEditor
      style={{ width: '1280px', height: '1024px' }}
      serviceURL="https://ds.example.com"
      authSettings={{ clientId: '<client ID>', clientSecret: '<client secret>' }}
      onLoad={handleLoad}
    />
  );
}

export default App;

serviceURL is required and must start with http:// or https://; otherwise, the component throws the error Invalid service URL.

A style passed in style replaces the whole default, so set display: 'inline-block' yourself if you want it. Unlike the Angular component, the React editor has no property for a document or a data source: load them in onLoad with the methods of the TXTextControl object, such as loadDocument and loadJsonData, after the editor has raised textControlLoaded.

DocumentViewer

Add the viewer to App.jsx:

function App() {
  return (
    <DocumentViewer
      width="1280px"
      height="1024px"
      serviceURL="https://ds.example.com"
      clientId="<client ID>"
      clientSecret="<client secret>"
      documentData="SGVsbG8gdGhlcmU="
    />
  );
}

export default App;

The viewer takes the credentials as separate properties, not in an object. documentData holds the document as a Base64-encoded string; the example shows the text "Hello there".

The README spells the client ID property clientID, but the component reads clientId. The README also lists customQueryParams, which version 5.0.0 of the component doesn't pass to the viewer. The component supports showThumbnailPane, which the README leaves out. The component passes the signatureSettings object on to the viewer, so it also accepts defaultSignatureFont of the viewer's SignatureSettings, which the README doesn't list.

Signature Settings

A signature box has a name, the name of the signature field, a style, "Signature", the default, or "Initials", and signingRequired, which is true by default:

<DocumentViewer
  width="1280px"
  height="1024px"
  serviceURL="https://ds.example.com"
  clientId="<client ID>"
  clientSecret="<client secret>"
  documentData="SGVsbG8gdGhlcmU="
  signatureSettings={{
    showSignatureBar: true,
    ownerName: 'Paul',
    signerName: 'Jacob',
    signerInitials: 'JK',
    redirectUrlAfterSignature: 'https://your.app/signed',
    signatureBoxes: [{ name: 'txsign', signingRequired: true, style: 'Signature' }]
  }}
/>

Once the viewer is loaded, your code works with the TXDocumentViewer object of the Document Viewer's JavaScript API.

How the Components Authorize

With a client ID and a client secret, both components request their access token from DS Server with the client credentials grant type, which the security profile must allow, and the credentials are part of the JavaScript the browser downloads. To keep them on the server, request the token there and pass it to the component: authSettings={{ accessToken: token }} for the editor, accessToken={token} for the viewer. Overview compares the options.

Related Pages

• Overview: how the client libraries connect to DS Server.
• Angular: the same components for Angular.
• JavaScript API: the TXTextControl and TXDocumentViewer objects.
• Creating Security Profiles: the client ID and secret the components need.