Skip to content
myza (/ˈmaɪzə/): Author emails with React & friends.
TypeScript HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components refinements May 17, 2019
lib
.gitignore
README.md
jest.config.js
package-lock.json
package.json Move react/styled-components to peer deps Jun 11, 2019
tsconfig.json
tslint.json

README.md

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.

You can’t perform that action at this time.