Awesome Open Source
Awesome Open Source

mjml-react · GitHub license npm version PRs Welcome

·

There is an awesome library mjml with github repo here https://github.com/mjmlio/mjml.

MJML is a markup language created by Mailjet. So in order to create emails on the fly we created a library with React components.

How it works

Install the required dependencies first:

npm install react react-dom mjml mjml-react

And afterwards write a code like a pro:

import {
  render,
  Mjml,
  MjmlHead,
  MjmlTitle,
  MjmlPreview,
  MjmlBody,
  MjmlSection,
  MjmlColumn,
  MjmlButton,
  MjmlImage
} from 'mjml-react';

const {html, errors} = render((
  <Mjml>
    <MjmlHead>
      <MjmlTitle>Last Minute Offer</MjmlTitle>
      <MjmlPreview>Last Minute Offer...</MjmlPreview>
    </MjmlHead>
    <MjmlBody width={500}>
      <MjmlSection fullWidth backgroundColor="#efefef">
        <MjmlColumn>
          <MjmlImage src="https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg"/>
        </MjmlColumn>
      </MjmlSection>
      <MjmlSection>
        <MjmlColumn>
          <MjmlButton
            padding="20px"
            backgroundColor="#346DB7"
            href="https://www.wix.com/"
            >
            I like it!
          </MjmlButton>
        </MjmlColumn>
      </MjmlSection>
    </MjmlBody>
  </Mjml>
), {validationLevel: 'soft'});

And as the result you will get a nice looking email HTML (works in mobile too!)

preview

Options

mjml-react sets the following MJML options when rendering to HTML:

{
  keepComments: false,
  beautify: false,
  minify: true,
  validationLevel: 'strict'
}

If you want to override these, you can pass an object to render as a second argument. See the MJML docs for the full list of options you can set.

Extensions

import {
  MjmlHtml,
  MjmlComment,
  MjmlConditionalComment
} from 'mjml-react/extensions';

<MjmlComment>Built with ... at ...</MjmlComment>
// <!--Built with ... at ...-->

<MjmlConditionalComment>MSO conditionals</MjmlConditionalComment>
// <!--[if gte mso 9]>MSO conditionals<![endif]-->

<MjmlConditionalComment condition="if IE">MSO conditionals</MjmlConditionalComment>
// <!--[if IE]>MSO conditionals<![endif]-->

<MjmlHtml tag="div" html="<span>Hello World!</span>" />
// <div><span>Hello World!</span></div>

Utils

We do have also some utils for post processing the output HTML. Because not all mail clients do support named HTML entities, like &apos;. So we need to replace them to hex.

import {
  namedEntityToHexCode,
  fixConditionalComment
} from 'mjml-react/utils';

const html = '<div>&apos;</div>';
namedEntityToHexCode(html);
// <div>&#39;</div>

fixConditionalComment('<!--[if mso]><div>Hello World</div><![endif]-->', 'Hello', 'if IE');
// <!--[if IE]><div>Hello World</div><![endif]-->

Limitations

Currently mjml and mjml-react libraries are meant to be run inside a node.

Example project

You can find an example project here https://github.com/wix-incubator/mjml-react-example


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,969
html (11,273
react (5,572
node (1,021
email (319
email-marketing (32