Email MJML widgets used by hapi-maily and other email services
npm install hapi-maily-widgetsA collection of email widgets for use with MJML
Install Widgets
``sh`
yarn add hapi-maily-widgets
Usage
`js
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { Footer, renderMJML } from 'header';
const emailComponent = renderMJML();
const staticEmail = renderToStaticMarkup(emailComponent);
console.log(staticEmail); // Static HTML email
`
Preview available widgets in react storybook, each story item
needs to be served through renderMJML in order to convert
mjml into valid HTML markup.
You are able to customize the look of the mail components by passing a
theme property to the renderMJML method.
The structure of the theme should be as follows
`js`
const theme = {
colors: {
primary: '#E91E63'
// you can use additional colors
// below, so long as it is
// string: 'HEX'
},
headerImage: {
src: 'url to hosted image',
alt: 'alt text describing image'
}
}
Then you can simply call the renderMJML method with your components.
`js
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { Button, renderMJML } from 'header';
const theme = {
colors: {
primary: '#03A9F4',
secondary: '#009688',
paul: '#8BC34A'
}
};
const buttonComponent = (
buttonType="paul"
>
Hi Im Paul!
)
const emailComponent = renderMJML(buttonComponent, theme);
const staticEmail = renderToStaticMarkup(emailComponent);
console.log(staticEmail); // Static Themed HTML email
`
#### yarn start
Generates the email widgets in storybook mode.
Open http://localhost:9009 to view it in the browser.
#### yarn lint`
Runs the linting command, should be done before pull requests are made.
This application follows the airbnb linting styleguide with minor changes.