Document how to use components in React
Closed this issue · 7 comments
Is there any official guide on how to render mjml with react?
If mjml can expose some APIs like https://github.com/chromakode/react-html-email then it would be great.
Hey @williamli, thanks for opening this issue. There's not an official guide on how to render MJML with React yet but you're right, this is something we need to think about. However, please note that MJML components are not only React components, especially because a postRender is applied to them.
Hey guys, I'm also looking for something like this. We built mail-a-tron recently and it would be amazing if we replaced react-html-email with mjml components which seem much more comprehensive.
Hey @jcsmesquita
As @ngarnier stated, React actually makes harder for us to use components. Many components suffer from React limitations (such as the lack of support for outlook comments or attributes that are no longer standard in HTML 5).
Many mj-body components can be used as any React components, but when rendering them you’ll miss most of hacks or external fixes we generate with a postRender in order to bypass React limitations.
That's why we're totally dropping React for MJML 4, in favor of plain JS. We've done a blog post about this to explain this choice https://medium.com/mjml-making-responsive-email-easy/hey-were-entirely-rebuilding-mjml-from-scratch-announcing-mjml-v4-ae92f83b725b
Hey, out of curiosity, Can you please explain what do you do on postRender and why That's not possible with a react api?
Hi @talarari
We're applying some outlook conditionnals comments, adding attributes that React define as non standard, adding/computing some styles to put directly in the head.
Some of them could be bypass by using renderToStaticMarkup but we don't think this is a viable option here
Can this not be solved by writing a custom react renderer? While still using react for components ( easy composition and code reuse)
I'm guessing you already considered this (read your medium post on v4 being plain js), still, just curious.
It could, but need so much effort and still not so much flexibility. In top of that speed starts to be a factor for an API & integration in some environment