Closed mastertheblaster closed 2 years ago
Is there any chance of this happening?
First of all thank you @mastertheblaster for writing this package!
I spent a little time looking into this. It's kinda hard to dynamically substitute mjml-browser
for mjml
while using this package.
So I decided to fork this package and strip away the mjml
dependency so that you can choose which version of mjml
you use to convert the MJML string into an HTML string.
You can see my Github repo here and I published an npm package @luma-team/mjml-react
Here is how the current repo handles serializing to HTML:
import { render, Mjml } from 'mjml-react';
const { html, errors } = render((<Mjml>...</Mjml>), mjmlOptions);
// html is now something you can throw into an email
Here is how my package serializes to HTML:
import { renderToMjml, Mjml } from '@luma-team/mjml-react';
import mjml2html from 'mjml';
// Or you can use 'mjml-browser' here
const mjmlString = renderToMjml(<Mjml>...</Mjml>));
const html = mjml2html(mjmlString);
// html is now something you can throw into an email
I like the latter method more because it allows you to choose your own MJML renderer.
I'd be happy to continue cleaning up my package if it would be useful for other people.
Here are some other things that I think would be nice to change:
Thanks for this @vpontis!
Also @mastertheblaster I'd be happy to merge this in if you would like. Or I can maintain it as a separate package...
While not documented, all pieces needed to render it on browser are present:
https://codesandbox.io/s/agitated-hypatia-9mcjo?file=/src/App.js
For info, in my case I wanted to have it directly in Storybook without an additional nested iframe
, so I did:
<div dangerouslySetInnerHTML={{ __html: mjml2html(renderToMjml(<SignUpConfirmationEmail />)).html }} />
(I think it's fine on the security perspective since Storybook does not manage real data)
Thanks!