Rendering DOCX Content in React Made Simple

As web developers, we frequently receive the assignment of constructing websites, and some of these sites may necessitate the creation of pages such as privacy policies, terms and agreements, and more. Developing these pages can be a daunting task, as they involve deciphering numerous pages of legal terminology. However, you can easily accomplish this by following these straightforward steps.

1. Convert the legal document from “.docx” to HTML using this AI tool called Cloudconvert

2. Login to your Cloudinary account or your company’s account, to upload the HTML file generate from Step 1 above

3. Copy the URL of the uploaded HTML file from your Cloudinary account

4. Lastly, do this in your React application

import React, {useEffect, useState} from "react"
export default function RenderLegalDoc = () => {
  const [htmlContent, setHtmlContent] = useState()

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('YOUR_CLOUDINARY_URL');
        const html = await response.text();
        if (html) {
           setHtmlContent(html)
        }
      } catch (error) {
        console.error('Error fetching HTML:', error);
      }
    };
    fetchData();
  }, []);

  return <div>
      <div dangerouslySetInnerHTML={{ __html: htmlContent}} />
  </div>
}

Conclusion

In this article we have learned:

1. convert docx file into HTML

2. upload HTML generate to Cloudinary

3. render the HTML file in React