# Loading Documents into the Document Viewer in React > This article explains how to load documents into the Document Viewer in React. It shows how to load documents from a base64 encoded string and a URL. - **Author:** Bjoern Meyer - **Published:** 2024-03-12 - **Modified:** 2026-07-17 - **Description:** This article explains how to load documents into the Document Viewer in React. It shows how to load documents from a base64 encoded string and a URL. - **3 min read** (409 words) - **Tags:** - React - ASP.NET - Loading - **Web URL:** https://www.textcontrol.com/blog/2024/03/12/loading-documents-into-the-document-viewer-in-react/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/03/12/loading-documents-into-the-document-viewer-in-react/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/03/12/loading-documents-into-the-document-viewer-in-react/llms-full.txt --- With the [recently released](https://www.textcontrol.com/blog/2024/02/29/tx-text-control-react-packages-released/llms-full.txt) 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 ](https://www.textcontrol.com/blog/2024/02/29/using-the-tx-text-control-document-viewer-in-a-react-application/llms-full.txt) 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 = "

This is a document

"; var base64 = btoa(html); event.srcElement['TXDocumentViewer'].loadDocument(base64, "loaded.html"); }; return ( ); } export default App; ``` 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 ( ); } export default App; ``` ### Conclusion Using the *Effect Hook* in React, the *TXDocumentViewer* can be used to load documents from a base64 encoded string and a URL. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [ASP.NET Core: Loading Documents in the Document Editor](https://www.textcontrol.com/blog/2024/04/15/asp-net-core-how-to-load-a-document-in-the-document-editor/llms.txt) - [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt) - [Comments JavaScript API: Useful Tips and Tricks](https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms.txt) - [Integrating Document Lifecycle Management with ASP.NET Core and C#](https://www.textcontrol.com/blog/2024/03/29/integrating-document-lifecycle-management-with-asp-net-core-and-c-sharp/llms.txt) - [Loading Documents in React Document Viewer](https://www.textcontrol.com/blog/2024/03/28/loading-documents-in-react-document-viewer/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [TX Text Control React Packages Released](https://www.textcontrol.com/blog/2024/02/29/tx-text-control-react-packages-released/llms.txt) - [Using the Document Editor in an ASP.NET Core React Application](https://www.textcontrol.com/blog/2024/02/27/using-the-document-editor-in-an-asp-net-core-react-application/llms.txt) - [MVC: Loading and Saving Documents Directly Server-Side](https://www.textcontrol.com/blog/2019/07/23/mvc-loading-and-saving-documents-directly-server-side/llms.txt)