React DocumentViewer

This article shows how to setup a new project with DS Server and how to use the document editor npm package in a React application.

Trial Token

If you are evaluating DS Server and you are using a trial token, you can skip the Prerequisites - DS Server Installation and the DS Server Setup part and continue with the integration.


React Application

Prerequisites - DS Server Installation

In order to follow these tutorials, DS Server must be successfully installed and licensed on a server. To learn how to do that, read the following articles:

DS Server Setup

In the DS Server admin portal, a new security profile needs to be added.

  1. Select Security Profiles from the main menu to open the security profile overview. Click on Create new profile to create a new security profile:

    DS Server Setup

  2. Type in a name and confirm with Create:

    DS Server Setup

  3. The profile details are shown including the Client ID and Client Secret values required for the OAuth authentication flow:

    DS Server Setup

React Application

In the next step, a new React Application is created.

  1. Open a Command Prompt and install create-react-app by running this command in your terminal:

    npm install -g create-react-app

  2. Run the following command to create a React application named my-ds-react-viewer-app:

    npx create-react-app my-ds-react-viewer-app

  3. Change into the created folder by typing in the following command:

    cd my-ds-react-viewer-app

  4. Install the TX Text Control document viewer package by typing in the following command:

    npm install --save @txtextcontrol/tx-react-ds-document-viewer

  5. Open this folder in Visual Studio Code using this command:

    code .

  6. In Visual Studio Code, open the file src -> App.js, replace the content with the following code and save it. Replace yourtoken with your actual access token you created at the beginning of this tutorial.

    import DocumentViewer from '@txtextcontrol/tx-react-ds-document-viewer'
    
    function App() {
    
        return (
          <DocumentViewer
            width="1024px"
            height="1024px"
            serviceURL="https://trial.dsserver.io"
            clientId="dsserver.u5NQQHkgjmCRAOeChUVc19zNFJ9aivKz"
            clientSecret="tPGgkutg8oYuSHPbfuRfE5DMf9arUCEg"
            documentData="SGVsbG8gdGhlcmU="
            userNames={['user1', 'user2']}>
          </DocumentViewer>
      );
    
    }
    
    export default App;
  7. Back in the command prompt, start the React application by typing in the following command:

    npm start