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.

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:

• Installation and Deployment
• Licensing

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:

   

2. Type in a name and confirm with Create:

   

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

   

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.

   • C#

   ​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;

   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 commands:

   npm install -g serve
   npm run build
   serve -s build