react-mjml

In this example below you will see how to do a react-mjml with some HTML / CSS and Javascript

react app to pull sass and mjml

Thumbnail
This awesome code was written by joeldom, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright joeldom ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>react-mjml</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"               content="The resume of Joel Dombek, a multi-diciplinary designer : developer and brand specialist with a focus on user interaction and design.">
    <meta name="viewport"                  content="width=device-width, initial-scale=1">
    <meta name="twitter:card"              content="summary" />
    <meta name="twitter:description"       content="The resume of Joel Dombek, a multi-diciplinary designer : developer and brand specialist with a focus on user interaction and design." />
    <meta name="twitter:title"             content="Joel Dombek ~ Resume" />
    <meta name="twitter:site"              content="@joeldombek" />
    <meta name="twitter:creator"           content="@joeldombek" />
    <meta property="og:url"                content="http://joeldom.github.io/resume/" />
    <meta property="og:type"               content="article" />
    <meta property="og:title"              content="Joel Dombek ~ Resume" />
    <meta property="og:description"        content="The resume of Joel Dombek, a multi-diciplinary designer : developer and brand specialist with a focus on user interaction and design." />
    <meta property="og:image"              content="https://joeldom.github.io/resume/jd-logo-reflex.gif" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto"'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Mono'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  

<div class="container">
	
	<div class="row">
		<div class="col-xs-6 spot">
			
		</div>
	</div>

	<div id="mjml"></div>
	<div id="more"></div>
	<div id="app"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/joeldom/react-mjml-zdJZeJ */
html, body {
  display: flex;
  justify-content: center;
  background-color: white;
}

section {
  align-items: center;
  flex-direction: columns;
  width: 800px;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  padding: 4em 0;
  overflow: hidden;
  max-height: 900px;
}
section h2 {
  color: white;
  text-align: center;
  font-weight: 100;
}
section h2 strong {
  font-weight: 900;
}
section h2 span {
  color: #aaa;
}
section #zoom-pic {
  display: block;
  margin: 0 auto 5em auto;
  width: 100%;
  text-align: center;
}
section #zoom-pic button {
  background: none;
  border: 3px solid white;
  color: white;
  margin: 0 6px;
  width: 10%;
  padding: .25em 0;
  display: inline-block;
  height: auto;
  font-size: 3em;
  box-sizing: border-box;
  cursor: pointer;
}
section #zoom-pic button:hover {
  background: white;
  color: #aaa;
  cursor: pointer;
}
section span#h {
  margin: -20px auto 0;
  text-align: center;
  display: block;
  background: white;
  color: #aaa;
  padding: .25em;
  width: 300px;
  font-size: 1em;
  z-index: 99;
  position: absolute;
  left: 0;
  right: 0;
}
section img {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.spot {
  background-color: #000;
}
.spot #wrap {
  background: #999;
  height: 200px;
}

#output {
  background: red;
  display: block;
  height: 100px;
  width: 900px;
}


/*Downloaded from https://www.codeseek.co/joeldom/react-mjml-zdJZeJ */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var HelloWorld = function (_React$Component) {
	_inherits(HelloWorld, _React$Component);

	function HelloWorld(props) {
		_classCallCheck(this, HelloWorld);

		var _this = _possibleConstructorReturn(this, (HelloWorld.__proto__ || Object.getPrototypeOf(HelloWorld)).call(this, props));

		_this.state = {
			height: 300
		};
		return _this;
	}

	_createClass(HelloWorld, [{
		key: "render",
		value: function render() {
			//console.log(this,props,name);

			var styleObj = {
				backgroundColor: "blue"
			};
			var _props = this.props,
			    name = _props.name,
			    age = _props.age,
			    bio = _props.bio,
			    pic = _props.pic;
			var height = this.state.height;

			return (
				//write JSX=HTML 
				//make spine-case
				React.createElement(
					"section",
					{ style: {
							backgroundColor: "blue",
							fontSize: 10
							//height: 200,
						}, id: "hello-world" },
					React.createElement("br", null),
					React.createElement(
						"h2",
						{ style: {
								color: "#fff",
								textTransform: "uppercase"
							} },
						this.props.fname,
						React.createElement(
							"strong",
							null,
							this.props.lname
						),
						React.createElement(
							"span",
							null,
							this.props.title
						)
					),
					React.createElement("br", null),
					React.createElement("br", null),
					React.createElement(
						"div",
						{ id: "zoom-pic" },
						React.createElement(
							"button",
							{ onClick: this.zoomPicOut.bind(this) },
							"\u2013"
						),
						React.createElement(
							"button",
							{ onClick: this.zoomPicIn.bind(this) },
							"+"
						),
						React.createElement(
							"button",
							{ onClick: this.zoomPicOG.bind(this) },
							"="
						)
					),
					React.createElement(
						"span",
						{ id: "h" },
						height
					),
					React.createElement("img", { src: pic, height: height })
				)
			);
		}
	}, {
		key: "zoomPicIn",
		value: function zoomPicIn() {
			this.setState({ height: this.state.height + 100 });
		}
	}, {
		key: "zoomPicOut",
		value: function zoomPicOut() {
			this.setState({ height: this.state.height - 100 });
		}
	}, {
		key: "zoomPicOG",
		value: function zoomPicOG() {
			this.setState({ height: this.state.height = 300 });
		}
	}]);

	return HelloWorld;
}(React.Component);

var mjml = function (_React$Component2) {
	_inherits(mjml, _React$Component2);

	function mjml() {
		_classCallCheck(this, mjml);

		return _possibleConstructorReturn(this, (mjml.__proto__ || Object.getPrototypeOf(mjml)).apply(this, arguments));
	}

	_createClass(mjml, [{
		key: "render",

		// constructor(props) {
		// 	super(props);
		// 	this.state = {
		// 		height: 300
		// 	};
		// }
		value: function render() {
			// const styleObjOne ={
			// 	backgroundColor: "#006554"
			// };
			var _props2 = this.props,
			    url = _props2.url,
			    alt = _props2.alt,
			    src = _props2.src;
			// var {height} = this.state;

			return React.createElement(
				"table",
				{ id: "output" },
				React.createElement(
					"tr",
					null,
					React.createElement(
						"td",
						null,
						React.createElement(
							"a",
							{ href: url, alt: alt, target: "_blank" },
							React.createElement("img", { src: src })
						)
					)
				)
			);
		}
	}]);

	return mjml;
}(React.Component);

//call self-closing <HelloWorld />
//add prop <HelloWorld name="Name" />
//ref DOM.getElementById 
// width={srcWidth} height={srcHeight} alt={alt}


ReactDOM.render(React.createElement(HelloWorld, { fname: "Joel", lname: "Dombek", title: "DESIGN : FED : UI", pic: "http://www.joeldombek.com/blog/wp-content/themes/15-redesign/img/me-bw.jpg" }), document.getElementById("mjml"));

ReactDOM.render(React.createElement("mjml", { url: "#", alt: "_ALT_", src: "http://www.joeldombek.com/blog/wp-content/themes/15-redesign/img/me-bw.jpg" }), document.getElementById("p"));
//props, style, className, state

Comments