Modern HTML emails are a tangle of archaic HTML and inline styles. This library encapsulates the cruft into simple React components and helps avoid common pitfalls.
react-html-email provides a set of components for a standard 600px table layout (inspired by HTML Email Boilerplate). React's Supported Tags and Attributes are extended to include a few deprecated attributes useful for legacy clients. In addition, a
style prop validator is included which uses Campaign Monitor's CSS Support Guide to check for potential compatibility issues across email clients.
$ npm install react-html-email
Import the library and set up React:
// set up React to support a few HTML attributes useful for legacy clients
To render a simple email:
const emailHTML =
You can find more examples in the examples directory of the repo.
Render an email component to an HTML string. Adds an XHTML 1.0 Strict doctype, as per HTML Email Boilerplate.
React ignores some attributes we need, such as the table
valign properties. Call this function to expand React's attribute repertoire before using email components from the library.
By default, inline styles passed to the
style prop will be validated against Campaign Monitor's CSS Support Guide. Here are the default settings, which can be overridden using
A PropTypes validator for checking email inline style compatibility. Used by default in the components below. Exported for use in your own components.
react-html-email include defaults for basic style properties, so that client styles are reset and normalized. Every component accepts a
style prop which overrides the reset styles.
An HTML document with a centered 600px
<table> container based on HTML Email Boilerplate.
It's necessary to always include a
title prop for some clients' "open in browser" feature.
See MailChimp's HTML guide for how this works.
A simplification of the
<table> element, the workhorse of an HTML email design.
<Box>es contain a vertical stack of
<Item>s. Use them to create visual structure, filled buttons, and spacing.
A subsection of a
<Box>, essentially a
Use to assign styles to text.
It can be handy to create an object containing your default text styles for reuse. For example:
const textStyles =fontFamily: 'Verdana'fontSize: 42fontWeight: 'bold'color: 'orange'...<Span ...textDefaults>Congratulations!</Span><Span ...textDefaults>You won a free cruise!</Span>
Use to format links. Requires an
href prop. Always sets
target="_blank" and defaults to underline. To remove the underline, set
An image, without any pesky borders, outlines, or underlines by default. Requires a
src prop, and
height to be set. You can override the default styles (such as adding a border) using the
You can pass a string prop
headCSS to your
<Email> component. You can see it in our kitchenSink.js example.
If you're using Mailchimp and need to add their custom
mc:edit attributes to your markup, we recommend using the mailchimpify module.