how to export react JS components to static html

Question

are there any utilities or approaches to export regular react component into an email friendly static html?

for example i have a dashboard using react-table and would love it if there was a way to auto-magically translate that to static html i could insert into an email body.

i can think of a few approaches using a headless browser to render as pure html, but it would be awesome if there was a solution with more email friendly html

Because the layout of these gets fairly complex, it may also be advantageous to render page as image and insert that image into email body?

Answer 1

I only really know HTML Email, and basics of React - and SO is not great for recommendations of software type questions - so I'll just speak to the email side.

If you can get HTML, you need to consider a few things.

First, anything over two columns is likely to run out of space. You would need to consider a stackable column structure with repeated headers. That would require hiding the duplicated headers for desktop views, since the tables would be separate due to the way we do stacked columns in emails (as inline-blocks without media queries). See https://medium.com/@nathankeenmelb/bulletproof-responsive-datatables-in-html-emails-64248b9e18f5 for full details.

Second, only some approaches would work like that. Images then would be your go-to option. A nice output for table images would be:

<a href="https://via.placeholder.com/600x500" title="Click/tap to go full screen"><img src="https://via.placeholder.com/600x500" width="600" style="vertical-align:middle;width:100%;border:0"></a>

The link goes to the image itself so you can zoom and move around easier, and get maximum realestate.

An alternative built on that idea would be to have a link from the image to landing page with full web capabilities. That would take longer to load, but may be well worth it.

Since that's probably the most viable, I'll explain these choices of attributes and styles:

• Use the width attribute width="600" because that's what Outlook desktop uses
• Use inline styles for those email clients that do not support <style> blocks
• Vertical-align:middle (or display:block ) removes the space underneath the image that some email clients add
• width:100% makes it responsive to mobiles
• border:0 ensures no border is shown because of the link

Third, datatables are so finicky and particular in HTML email. Each table is unique because they have different data in them that responds differently. In normal web design, you can just use a nice reset and get everything working without much thought. In HTML Email, everything needs to be inline, and supported, with fallbacks for those things that are unsupported. So even the core data often needs editing - eg if it has long URLs, emails or words you need to add a wrapping span with word-break CSS but also <wbr> s in the middle of it for some email clients to properly wrap.

Datatables don't often come up, and because of these considerations, it's hard to see how they could be automated easily - and hard to build a case for it financially.

On a related note, if you can show the information using card UI, that seems to me to be a much nicer, simpler, more accessible and easier to code solution than datatables. This is about taking the information and redesigning it into card blocks. I talk about that in detail here: https://medium.com/@nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2