# React > Add the DocumentEditor and DocumentViewer components to React apps: installation, the Vite default import fix, every property and signature settings. - **Product:** DS Server - **Section:** Documentation - **Kind:** Topic - **Path:** DS Server > Client-Side Libraries > React - **2969 words** - **Web URL:** https://docs.textcontrol.com/ds-server/client-libraries/react/ - **LLMs URL:** https://docs.textcontrol.com/ds-server/client-libraries/react/llms.txt - **LLMs-Full URL:** https://docs.textcontrol.com/ds-server/client-libraries/react/llms-full.txt --- 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](https://docs.textcontrol.com/ds-server/getting-started/document-editor/react/llms-full.txt) and [Document Viewer in React](https://docs.textcontrol.com/ds-server/getting-started/document-viewer/react/llms-full.txt). ### Packages and Requirements | Package | Version | Component | `react` and `react-dom` | |---|---|---|---| | [@txtextcontrol/tx-react-ds-document-editor](https://www.npmjs.com/package/@txtextcontrol/tx-react-ds-document-editor) | 5.0.0 | `DocumentEditor` | `^19.0.0` | | [@txtextcontrol/tx-react-ds-document-viewer](https://www.npmjs.com/package/@txtextcontrol/tx-react-ds-document-viewer) | 5.0.0 | `DocumentViewer` | `^19.0.0` | 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](https://docs.textcontrol.com/ds-server/client-libraries/overview/#authorize-a-library) 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: ```bash 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: ```jsx 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*: ```jsx function App() { function handleLoad() { // TXTextControl exists from now on TXTextControl.addEventListener('textControlLoaded', () => { console.log('The Document Editor is ready.'); }); } return ( ', clientSecret: '' }} onLoad={handleLoad} /> ); } export default App; ``` `serviceURL` is required and must start with `http://` or `https://`; otherwise, the component throws the error `Invalid service URL`. | Property | Type | Default | Description | |---|---|---|---| | `serviceURL` | string | none | The URL of DS Server | | `authSettings` | object | none | The credentials: `clientId` and `clientSecret` of the security profile, or an `accessToken` your application has requested | | `style` | object | `{ width: '100%', height: '1000px', display: 'inline-block' }` | The style of the editor's container, such as its `width` and `height` in pixels or percent | | `editMode` | string | `'Edit'` | `'Edit'`, `'ReadAndSelect'`, `'ReadOnly'` or `'UsePassword'` | | `contextMenusEnabled` | boolean | not set | Whether a right-click opens a context menu | | `formattingPrinter` | string | `''` | The name of a printer whose text dimensions and capabilities are used to format the document | | `culture` | string | `''` | The culture for formats such as dates and times, such as `'de-DE'` | | `uiCulture` | string | `''` | The culture of the user interface strings, such as `'en-US'` | | `userNames` | string\[\] | `[]` | The users who can edit the editable regions assigned to them when the document is read-only | | `reconnectTimeout` | number | `0` | The time in seconds after which the editor stops trying to reconnect after the connection is lost | | `customQueryParams` | object | `{}` | Query parameters the editor adds to the address of its WebSocket connection | | `onLoad` | function | none | Called when the editor script has loaded, after the component has called `TXTextControl.init`; the `TXTextControl` object exists then | 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](https://docs.textcontrol.com/ds-server/reference/javascript/txtextcontrol/llms-full.txt) object, such as [loadDocument](https://docs.textcontrol.com/ds-server/reference/javascript/txtextcontrol/loaddocument-method/llms-full.txt) and [loadJsonData](https://docs.textcontrol.com/ds-server/reference/javascript/txtextcontrol/loadjsondata-method/llms-full.txt), after the editor has raised `textControlLoaded`. ### DocumentViewer Add the viewer to *App.jsx*: ```jsx function App() { return ( ); } 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". | Property | Type | Default | Description | |---|---|---|---| | `serviceURL` | string | none | The URL of DS Server | | `clientId` | string | none | The client ID of the security profile | | `clientSecret` | string | none | The client secret of the security profile | | `accessToken` | string | none | An access token your application has requested; used when `clientId` isn't set | | `width` | string | none | The width of the component, such as `"1280px"` | | `height` | string | none | The height of the component | | `documentData` | string | none | The document to display, Base64-encoded | | `documentPath` | string | none | The document name the viewer displays | | `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 text can be selected and copied | | `showThumbnailPane` | boolean | `true` | Whether the thumbnail pane is visible | | `userNames` | string\[\] | `[]` | The users who have access to editable regions | | `resources` | object | English strings | Strings of the user interface, as pairs of resource name and text | | `signatureSettings` | object | see below | The settings of a signature process | | `onLoad` | function | none | Called when the viewer script has loaded; the `TXDocumentViewer` object exists then | 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](https://docs.textcontrol.com/ds-server/reference/javascript-document-viewer/signaturesettings/llms-full.txt), which the README doesn't list. #### Signature Settings | Property | Type | Default | Description | |---|---|---|---| | `showSignatureBar` | boolean | `false` | Whether the signature bar is shown | | `ownerName` | string | `''` | The name of the document owner | | `signerName` | string | `''` | The name of the signer | | `signerInitials` | string | `''` | The initials of the signer | | `signatureBoxes` | object\[\] | `[]` | The boxes to sign; when the array isn't empty, `signatureBoxName` has no effect | | `signatureBoxName` | string | `'txsign'` | Deprecated: the name of the signature box; use `signatureBoxes` | | `defaultSignatureFont` | object | none | The default font of text-based signatures: `family`, a CSS font family | | `uniqueId` | string | `''` | A unique ID of the signature | | `redirectUrlAfterSignature` | string | `''` | The URL to which DS Server sends the signed document in an HTTP POST request after a successful signing process, as a `SignatureData` object (see [Custom Signing Endpoints](https://docs.textcontrol.com/ds-server/plugins/signing/llms-full.txt)) | | `customSigning` | boolean | `false` | Whether your own code handles the signing process | 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: ```jsx ``` Once the viewer is loaded, your code works with the [TXDocumentViewer](https://docs.textcontrol.com/ds-server/reference/javascript-document-viewer/txdocumentviewer/llms-full.txt) 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](https://docs.textcontrol.com/ds-server/client-libraries/overview/#authorize-a-library) compares the options. ### Related Pages - [Overview](https://docs.textcontrol.com/ds-server/client-libraries/overview/llms-full.txt): how the client libraries connect to DS Server. - [Angular](https://docs.textcontrol.com/ds-server/client-libraries/angular/llms-full.txt): the same components for Angular. - [JavaScript API](https://docs.textcontrol.com/ds-server/reference/javascript-api/llms-full.txt): the `TXTextControl` and `TXDocumentViewer` objects. - [Creating Security Profiles](https://docs.textcontrol.com/ds-server/administration/security-profiles/llms-full.txt): the client ID and secret the components need. --- ## Nearby - **Previous:** [Angular](https://docs.textcontrol.com/ds-server/client-libraries/angular/llms-full.txt) - **Next:** [Document Processing](https://docs.textcontrol.com/ds-server/document-processing/llms-full.txt)