Search code examples
javascriptreactjshtml-email

Best way to render HTML emails in React app

I create an SPA React application that can send and receive email messages.

What is the best way to render received HTML email messages? The task becomes problematic when I receive a huge email message with a lot of images in base64 and HTML tags.

I receive the email as JSON HTML string from API and want to render it properly.

I tried two approaches:

  1. Render in div with dangerouslySetInnerHTML={{ __html: htmlMessageText }} - there is problem with safety
  2. Use my email editor in preview mode (Jodit) - there is problem with Layout Thrashing

In both approaches, there is the problem with performance. Emails (800 lines) renders a lot of time (~2 minutes).

There is no problem with simple HTML emails, these renders fast, but with some of them - especially bigger emails - application like to freeze layout.

Solution

  • The performance problems are caused by big data-URI images. The safety problems can be solved by a sanitizer library. So your algorithm might look like this:

    1. Replace data: URIs with blob:. For inspiration you can check out the relevant part in the code of TinyMCE.
    2. Now that after step 1 there is much less markup left, pass it through an HTML sanitizer. I would recommend DOMPurify.
    3. dangerouslySetInnerHTML