Skip to content
/ myza Public

myza (/ˈmaɪzə/): Author emails with React & friends.

Notifications You must be signed in to change notification settings

teamcurri/myza

Repository files navigation

myza

myza (/ˈmaɪzə/)

Author emails with React & friends.

Table of Contents

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

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.

About

myza (/ˈmaɪzə/): Author emails with React & friends.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published