We just published a prerelease version of the TX Text Control DocumentViewer for React on npm. Just like the DocumentViewer for Angular, it runs with the same ASP.NET (Core) backend powered by TX Text Control .NET Server.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. To learn more about React and to learn how to get started, please visit the React website.

Step 1: Trial Access Token

The easiest way to evaluate TX Text Control for React (and Angular) without hosting your own backend server is by creating a trial access token valid for 30 days.

Request Token

Step 2: Creating the React App

1. Install Node.js® and npm, if not done before.

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

   npm install -g create-react-app

3. Run the following command to create a React application named mydocviewerapp:

   npx create-react-app mydocviewerapp

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

   cd mydocviewerapp

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

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

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

   code .

7. 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 React from 'react'
   
   import DocumentViewer from '@txtextcontrol/tx-react-document-viewer'
   
   const signatureProps = { 
     showSignatureBar: true,
     signatureBoxName: 'txsign',
     redirectUrlAfterSignature: 'https://www.textcontrol.com',
     ownerName: 'Paul',
     signerName: "Jakob",
     signerInitials: "PK"
   };
   
   const App = () => {
     return <div>
       
       <p>DocumentViewer Sample</p>
     
       <DocumentViewer
         width= "800px"
         height ="500px"
         basePath = "https://backend.textcontrol.com?access-token=yourtoken"
         dock = "Fill"
         documentData = "SGkgdGhlcmU="
         documentPath = "test.docx"
         isSelectionActivated = {true}
         showThumbnailPane = {true}
         signatureSettings = {signatureProps}
         toolbarDocked = {true}
         resources = ""
       />
   
     </div>
   
   }
   
   export default App

   

8. Back in the command prompt, start the React application by typing in the following command:

   npm start

Your default browser is opened with your created React app: