- Notifications
You must be signed in to change notification settings - Fork47
React component library to generate the HTML emails on the fly
License
wix-incubator/mjml-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This project is no longer maintained. There will be no more new features, fixes and releases. Feel free to fork this repository, use different build system and release this project under different name.
Known forks:
There is an awesome librarymjml with github repo herehttps://github.com/mjmlio/mjml.
MJML is a markup language created byMailjet.So in order to create emails on the fly we created a library withReact components.
Install the required dependencies first:
npm install react react-dom mjml mjml-react
And afterwards write a code like a pro:
import{render,Mjml,MjmlHead,MjmlTitle,MjmlPreview,MjmlBody,MjmlSection,MjmlColumn,MjmlButton,MjmlImage,}from"mjml-react";const{ html, errors}=render(<Mjml><MjmlHead><MjmlTitle>Last Minute Offer</MjmlTitle><MjmlPreview>Last Minute Offer...</MjmlPreview></MjmlHead><MjmlBodywidth={500}><MjmlSectionfullWidthbackgroundColor="#efefef"><MjmlColumn><MjmlImagesrc="https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg"/></MjmlColumn></MjmlSection><MjmlSection><MjmlColumn><MjmlButtonpadding="20px"backgroundColor="#346DB7"href="https://www.wix.com/"> I like it!</MjmlButton></MjmlColumn></MjmlSection></MjmlBody></Mjml>,{validationLevel:"soft"});
And as the result you will get a nice looking email HTML (works in mobile too!)
mjml-react sets the following MJML options when rendering to HTML:
{keepComments:false,beautify:false,minify:true,validationLevel:'strict'}
If you want to override these, you can pass an object torender as a second argument. See theMJML docs for the full list of options you can set.
import{MjmlHtml,MjmlComment,MjmlConditionalComment}from'mjml-react/extensions';<MjmlComment>Built with ... at ...</MjmlComment>// <!--Built with ... at ...--><MjmlConditionalComment>MSOconditionals</MjmlConditionalComment>// <!--[if gte mso 9]>MSO conditionals<![endif]--><MjmlConditionalCommentcondition="if IE">MSO conditionals</MjmlConditionalComment>// <!--[if IE]>MSO conditionals<![endif]--><MjmlHtmltag="div"html="<span>Hello World!</span>"/>// <div><span>Hello World!</span></div>
We do have also some utils for post processing the output HTML.Because not all mail clients do support named HTML entities, like'.So we need to replace them to hex.
import{namedEntityToHexCode,fixConditionalComment}from"mjml-react/utils";consthtml="<div>'</div>";namedEntityToHexCode(html);// <div>'</div>fixConditionalComment("<!--[if mso]><div>Hello World</div><![endif]-->","Hello","if IE");// <!--[if IE]><div>Hello World</div><![endif]-->
Currentlymjml andmjml-react libraries are meant to be run inside a node.
You can find an example project herehttps://github.com/wix-incubator/mjml-react-example
About
React component library to generate the HTML emails on the fly
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Contributors15
Uh oh!
There was an error while loading.Please reload this page.