How to output raw text in mjml-react?

[kdallmeyer-sr]

Hello,

We are using MGML React to output email templates that will then use handlebars when processing the final email.

For example, we have now handlebars function with named parameter format. When using React, it escapes the quote in the named parameter and breaks handlebars processing.

Neither MjmlText or MjmlRaw work.

<MjmlText>{`{{now format="YYYY"}}`}</MjmlText>
<MjmlRaw>{`{{now format="YYYY"}}`}</MjmlRaw>

outputs

<mj-text>{{now format=&#x27;YYYY&#x27;}}</mj-text>
<mj-raw>{{now format=&#x27;YYYY&#x27;}}</mj-raw>

"dangerouslySetInnerHTML" does not work either.

<MjmlText dangerouslySetInnerHTML={{ __html=`{{now format="YYYY"}}`}}/>
<MjmlText dangerouslySetInnerHTML={{ __html=`{{now format="YYYY"}}`}}/>

outputs

<mj-text dangerously-set-inner-html="[Object]"></mj-text>
<mj-raw dangerously-set-inner-html="[Object]"></mj-raw>

Any idea on how to do this in React or in MJML-React?

[mastertheblaster]

Hey,

Try the following code:

function Raw({ html }) {
  return React.createElement('mj-raw', {
    dangerouslySetInnerHTML: {
      __html: html
    }
  });
}

<Mjml>
  <MjmlBody>
    <Raw html={`{{now format="YYYY"}}`} />
  </MjmlBody>
</Mjml>

It worked for me. 🤔

[kdallmeyer-sr]

Works! Although I wish it was built in so a hack like this isn't necessary.

Thanks!

[kprokopczyk]

@mastertheblaster the above solution works as far as preventing escaping, but i realized the rendered html retains the <mj-raw> tags.
So this:

<MjmlText> {`Copyright `} <RawHtml html={"{{now format='YYYY'}}"} /></MjmlText>

becomes this mjml: <mj-text>Copyright <mj-raw>{{now format='YYYY'}}</mj-raw>
becomes this html:<div>Copyright <mj-raw>{{now format='YYYY'}}</mj-raw></div>

Do you see the same thing on your end?

[mastertheblaster]

Hey @kprokopczyk,

The issue you describe is related to mjml engine itself. Seems like it doesn't allow mj-raw tags inside the mj-text.
Try yourself in their online tool https://mjml.io/try-it-live

In your usecase i would try a little bit different approach:

function Raw({ tag, html }) {
  return React.createElement(tag || 'mj-raw', {
    dangerouslySetInnerHTML: {
      __html: html
    }
  });
}

<Mjml>
  <MjmlBody>
    <Raw html={`{{now format="YYYY"}}`} />
    <MjmlText>
      <Raw tag="span" html={`{{now format="YYYY"}}`} />
    </MjmlText>
  </MjmlBody>
</Mjml>

[mastertheblaster]

I have added the MjmlHtml component as an extension as it's not the Mjml* element. The usage looks like:

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

<MjmlHtml tag="span" html={`{{now format="YYYY"}}`} />

[felixmosh]

Weird question, @kdallmeyer-sr why would you pass to something like handlebars?
The whole point of mjml-react is to allow you to generate "templates" using React.
In your case I would use a format function inside react.

import format from 'date-fns';

<MjmlText>{format(new Date(), 'YYYY')}</MjmlText>

[kdallmeyer-sr]

Its a good question, not a weird one!

The ESP we use uses handlebars to fill in user properties. We use MJML as a template to generate an html+handlebars template for the ESP. Previously we had to use their WYSIWYG to generate templates or handcode. Using MJML allowed us a third option that makes it much easier for engineers.

Hoped that answered your question.

[tsah-balance]

Hi - bumping this - as I could not find anywhere else that addresses this issue.
What can be the solution if I would like to generate the html with handlebars {{#each}}, for example:

<MjmlTable color="#777777">
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
  {{#each patients}}
        <tr>
          <td> </td>
          <td>2</td>
        </tr>
  {{else}}
        <tr>
          <td>NO DATA</td>
        </tr>
  {{/each}}
 </MjmlTable>

[daliusd]

Hi - bumping this - as I could not find anywhere else that addresses this issue. What can be the solution if I would like to generate the html with handlebars {{#each}}, for example

It is react library - use react for this. Otherwise you have two options:

1. Use mjml directly. Potentially you don't need mjml-react.
2. Use handlebars to generate js/ts files with mjml-react