myza

myza (/ˈmaɪzə/)

Author emails with React & friends.

Table of Contents

• 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:

1. Render the passed in component with ReactDOMServer.renderToStaticMarkup
2. Collect all styled-components styles with ServerStyleSheet.collectStyles
3. Inject desired font family, styles, and the rendered component into the body of a sane default email html wrapper
4. Inline all styles with Automattic/juice
5. 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.