![Introducing Dashboard Analytics](https://cdn.sanity.io/images/cgdhsj6q/production/af327c5bd94708db501516a75da6870aef894c64-2286x1522.png?w=400&fit=max&auto=format)
Product
Introducing Dashboard Analytics
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
react-html-email
Advanced tools
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
To render a simple email:
import { Email, Item, Span, A, renderEmail } from 'react-html-email'
const emailHTML = renderEmail(
<Email title="Hello World!">
<Item align="center">
<Span fontSize={20}>
This is an example email made with:
<A href="https://github.com/chromakode/react-html-email">react-html-email</A>.
</Span>
</Item>
</Email>
)
You can find more examples in the examples directory of the repo.
renderEmail(emailComponent)
Render an email component to an HTML string. Adds an XHTML 1.0 Strict doctype, as per HTML Email Boilerplate.
configStyleValidator(config)
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 configStyleValidator
:
ReactHTMLEmail.configStyleValidator({
// When strict, incompatible style properties will result in an error.
strict: true,
// Whether to warn when compatibility notes for a style property exist.
warn: true,
// Platforms to consider for compatibility checks.
platforms: [
'gmail',
'gmail-android',
'apple-mail',
'apple-ios',
'yahoo-mail',
'outlook',
'outlook-legacy',
'outlook-web',
],
})
PropTypes.style
A PropTypes validator for checking email inline style compatibility. Used by default in the components below. Exported for use in your own components.
Components in 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.
<Email>
An HTML document with a centered 600px <table>
inside <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.
<Box>
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.
<Item>
A subsection of a <Box>
, essentially a <tr><td>
unit.
<Span>
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: 42,
fontWeight: 'bold',
color: 'orange',
}
[...]
<Span {...textDefaults}>Congratulations!</Span>
<Span {...textDefaults}>You won a free cruise!</Span>
<A>
Use to format links. Requires an href
prop. Always sets target="_blank"
and defaults to underline. To remove the underline, set textDecoration="none"
.
<Image>
An image, without any pesky borders, outlines, or underlines by default. Requires a src
prop, and width
and height
to be set. You can override the default styles (such as adding a border) using the style
prop.
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.
3.0.0 - 2017-09-26
cellSpacing
and cellPadding
attributes. This should (in theory) have a negligible effect on rendering since HTML attribute names are case-insensitive. See https://github.com/facebook/react/issues/10863.FAQs
Create elegant HTML email templates using React.
The npm package react-html-email receives a total of 2,130 weekly downloads. As such, react-html-email popularity was classified as popular.
We found that react-html-email demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
Security News
A new OpenSSF report uncovers critical gaps in secure software training, with 75% of new developers unfamiliar with secure practices, highlighting urgent educational needs.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.