Best way to render HTML emails in React app

Question

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.

Answer 1

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

Answer 2

You could try a HTML to React parser... https://www.npmjs.com/package/react-html-parser.

Answer 3

You can use the ref elements to pass HTML in your react component

class Demo extends Component {
    constructor(props) {
        super(props);

    }

    render() {
         //Here you can add your Html code 
         //or you can pass by props or any state
         this.el.innerHTML = '';

        return (
            <div ref={el => this.el = el}>
            </div>
        );
    }

}

export default Demo

Answer 4

We found a library that addresses this issue. It's called react-letter.

We were also facing the same issue. We initially used to purify the html and convert html to uri and pass it iframe. It worked but if the uri is more than 2mb it used to break. The react-letter library is working for now.