Mjml: Use mjml react components

[alexcarruthers]

I'm using server-side react to render emails and I was wondering if there was an easy way to use the mjml components as standard react components.
Basically, can I do this:

React.createClass({
  render() {
    return (
      <MjBody>
        // mj-sections go here....
      </MjBody
    );
  }
});

[iRyusa]

Hello @alexcarruthers

Yes it should work, you can import any MjElement with :

import { elements } from 'mjml'

const { MjBody, MjSection, MjColumn, MjText }  = elements

Keep in mind that some fix aren't doable in react so you might need to use something like that : https://github.com/mjmlio/mjml/blob/master/src/mjml2html.js#L51-L6 to include media queries and most of outlook stuff. I'll try to do a release this week to expose them for advanced use of MJML

[iRyusa]

Is this ok for you @alexcarruthers can we close ? :)

[jarsbe]

@iRyusa Sorry to chime in on a closed issue but this doesn't seem to work as expected.

I can't get any of these elements to render:

render() {
    return (
      <elements.body>
        <elements.section>
          <elements.column>
            <elements.text>
              Some text which does not display
            </elements.text>
          </elements.column>
        </elements.section>
      </elements.body>
    )
  }

The HTML output:

<div data-reactroot=""><div class="mj-body" data-width="600"></div></div>

Taking away the body produces a table but no text rendering. Any help here would be much appreciated!

Also it looks like the imports have changed which is a bit awkward for use with React as a lot of the names are valid HTML so they need converting to be usable with JSX.

const { body, section, column, text } = elements
const Body = body
const Section = section
const Column = column
const Text = text

P.S Thanks a lot for the work you'll have put into this library. It's been fantastic! Also the reason for rendering with React is to show a live preview as close as possible to the final email HTML. Happy to help if possible.

[iRyusa]

Hi,

In a few days MJML 2 will be released (available on branch mjml-core), I believe that it should fix your issue of using MJML Components in a React context.

For your naming concern, all standard components will be prefixed with mj- to solve the possible conflict.

Keep in mind that MJML is more than a React based framework, a lot of fix for Outlook & many clients are done in a "post render". They aren't exposed in 1.X but, they will be in 2.X

[jarsbe]

Fantastic, looking forward to the release. Once again thanks for all the effort on this lib!

[gnestor]

Is there any documentation/ or examples available demonstrating how to use the MJML React components directly?