@density/postcard

A framework for creating html emails in react or with plain html.

latest

npm

Version: 1.2.0

Version published: 7 years ago

Weekly downloads: 9

Maintainers: 5

Weekly downloads

Created: 8 years ago

Source

Postcard

A email generator written in React.

HTML emails are hard. Ideally, we want to support various email clients, ancient and modern while also being able to write the email in modern technologies we are familiar with and use throughout our system.

Postcard is a tool that allows html emails to be written in React and styled with scss. As input, you provide a tree of stateless components and some scss, and we'll do a couple things:

Render the scss to css.
Render the React component tree with react-dom/server's renderToStaticMarkup. This is why the components should be stateless - the components are only rendered once and are used purely as a way to break up the email into reusable chunks.
Inline all styles into the html. Some email clients strip out all style tags and therefore inlining styles into each html element is the only way to ensure they will be properly styled. This tool uses Mailchimp's CSS inliner.

Installation

NOTE: node >= v7.6 is required for use of async/await, which this package requires.

npm install -g @density/postcard

Documentation

Run postcard --help.

React component example

$ cat index.js
function Container(props) {
  return <div className="container">{props.children}</div>;
}

// A postcard module must defaultly export a function that will be called with render parameters.
// Right now the only parameter is `head`, which is some jsx that must be injected into the <head>
// of your email.
module.exports = ({head}) => (
  <html>
    <head>
      {/* head data is injected below */}
      {head}
    </head>
    <body>
      <Container>
        <h1>Title</h1>
        <p>lorem ipsum dolar set amet.</p>
      </Container>
    </body>
  </html>
);

$ cat styles.scss
.container {
  background-color: white;
  max-width: 800px;
  margin: 20px auto;
}
$ # Postcard will combine together and minify the two sources!
$ postcard ./index.js --styles ./styles.js
<style>.container{background-color:#fff;max-width:800px;margin:20px auto}</style><div class=container style="background-color:#fff;max-width:800px;margin:20px auto"><h1>Title</h1><p>lorem ipsum dolar set amet.</p></div>

FAQs

What is @density/postcard?

Is @density/postcard popular?

Is @density/postcard well maintained?

Package last updated on 21 Mar 2019

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.

Install