myza (/ˈmaɪzə/)

Author emails with React & friends.

Motivation
Installation
Usage
How It Works
Components
Roadmap

Motivation

Myza aims to fill a void in the email tooling space. There's MJML which is neat, but lacks the ability to interpolate variables into your templates. There's also Foundation, which is built atop less modern tooling like SCSS.

Installation

npm i -S myza

Usage

import Myza, { Components } from 'myza'
import styled from 'styled-components'

const Title = styled(Components.Center)`
  font-size: 45px;
  font-weight: 900;
`

const WelcomeEmail = ({ firstName }) =>
  <Title>Welcome to Curri, {firstName}</Title>

const renderedEmail = Myza.renderEmail(
  WelcomeEmail,
  { firstname: 'Myza' },
  { fontFamily: `"Comic Sans", Papyrus, Arial, sans-serif'` }
)

How It Works

The core Myza engine works as follows:

Render the passed in component with ReactDOMServer.renderToStaticMarkup
Collect all styled-components styles with ServerStyleSheet.collectStyles
Inject desired font family, styles, and the rendered component into the body of a sane default email html wrapper
Inline all styles with Automattic/juice
Run the HTML output through pretty

Components

<Center />: Center passed content
<Spacer value={50}/>: Use to add space between elements
<MaxWidth value={320}/>: Container with a max width

Roadmap

Build out suite of battle-tested, cross-client components
Run suite of components through Storybook
Set up email client testing

Changelog

0.4.0: <Spacer /> and <MaxWidth /> components; better Outlook for Windows support

Myza Logo

Shamelessly pulled from Shutterstock.

Credits

Built by the engineering team at Curri.

teamcurri/myza