Natural Preference for Minification
    Wondering what’s next for npm?Check out our public roadmap! »

    mjml-react
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/mjml-react package

    1.2.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i mjml-react

    DownloadsWeekly Downloads

    19,953

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    242 kB

    Total Files

    115

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar