Use mjml react components about mjml HOT 6 CLOSED

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

from mjml.

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

from mjml.

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

from mjml.

@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.

from mjml.

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

from mjml.

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

from mjml.