Comments (6)
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.
Related Issues (20)
- `mjml2html` render in web worker throws `Uncaught ReferenceError: window is not defined` HOT 2
- Support DATA variable in href or button HOT 1
- Icon with text/Column within Column HOT 1
- Dependency: html-minifier REDoS vulnerability HOT 4
- No padding on outlook HOT 8
- Helper UrlEncode does not return the expected result HOT 3
- Empty "lang" attribute on mjml element is rendered as invalid lang="und" HOT 3
- Mobile customization issue. HOT 2
- Example of how to add color variables HOT 1
- MJML Table Data not rendered in newer Outlook versions using WebView2 (Desktop and Android) HOT 14
- how to add a helper container for an image so it can be centered between elements. HOT 1
- Custom mj-head component causes TypeError: this.context.processing is not a function HOT 8
- Outlook 2404 build 17531.20119 not rendering MJML template HOT 10
- MJML Templates not rendering as expected in New Outlook on Windows HOT 4
- Wrong vertical-align in mj-column HOT 1
- Outlook web client doesn't render columns HOT 5
- mjml column is not working in hotmail
- Invalide Certificate HOT 7
- Try it live does not allow pasting HOT 1
- HTML Comments rendered with additional white space
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mjml.