A framework for creating html emails in react or with plain html.
npm install @density/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.
>= v7.6 is required for use of async/await, which this package requires.npm install -g @density/postcard
postcard --help.``
$ cat index.js
function Container(props) {
return {props.children};
}
// A postcard module must defaultly export a function that will be called with render parameters. lorem ipsum dolar set amet.
// Right now the only parameter is head, which is some jsx that must be injected into the
// of your email.
module.exports = ({head}) => (
{/ head data is injected below /}
{head}
Title
);
$ 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
lorem ipsum dolar set amet.