With the recently released React packages, the Document Editor and Document Viewer can be used in React JavaScript applications.

Learn More

This article shows how to use the TX Text Control Document Viewer in a React application. The Document Viewer is a powerful, web-based document viewing and editing component that is based on TX Text Control.

Using the TX Text Control Document Viewer in a React Application

In the tutorial above, documents are loaded through the documentData property during the initialization of the Document Viewer. However, in many applications, the document is dynamically and asynchronously loaded into the viewer as part of the workflow of the application.

Documents in all supported formats, including DOCX, DOC, RTF, and HTML, can be loaded using the loadDocument method.

The use of this method on a button click is not a problem if the viewer has already been created. However, the problem is that the TXDocumentViewer object does not exist immediately when the page is loaded.

Using the Effect Hook

For this purpose, we will use the Effect Hook, which allows you to perform side effects. In the useEffect method, we will append the documentViewerLoaded event. This event is fired when the viewer is ready to load documents.

import React, { useRef, useEffect } from 'react';
import DocumentViewer from '@txtextcontrol/tx-react-document-viewer'
function App() {
useEffect(() => {
window.addEventListener('documentViewerLoaded', handleLoaded);
}, []);
const handleLoaded = (event) => {
var html = "<html><p>This is a document</p></html>";
var base64 = btoa(html);
event.srcElement['TXDocumentViewer'].loadDocument(base64, "loaded.html");
};
return (
<DocumentViewer
width="1000px"
height="800px"
basePath="https://backend.textcontrol.com?access-token=yourtoken">
</DocumentViewer>
);
}
export default App;
view raw test.js hosted with ❤ by GitHub

In the handleLoaded method, we will use the TXDocumentViewer instance found in window (the source element of the event arguments), since React doesn't allow us to use unknown objects.

Loading a Document from a URL

The document can also be downloaded in the handleLoaded event and then loaded into the viewer to load a document from a Web API or any other URL.

import React, { useRef, useEffect } from 'react';
import DocumentViewer from '@txtextcontrol/tx-react-document-viewer'
function App() {
useEffect(() => {
window.addEventListener('documentViewerLoaded', handleLoaded);
}, []);
const handleLoaded = (event) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://yourapi.domain.com/api/document", true);
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
event.srcElement['TXDocumentViewer'].loadDocument(btoa(xhr.responseText), "loaded.html");
}
}
};
return (
<DocumentViewer
width="1000px"
height="800px"
basePath="https://backend.textcontrol.com?access-token=yourtoken">
</DocumentViewer>
);
}
export default App;
view raw test.js hosted with ❤ by GitHub

Conclusion

Using the Effect Hook in React, the TXDocumentViewer can be used to load documents from a base64 encoded string and a URL.