React Email Template

by IPWright83

HTML

<div id="app"></div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

.replies {
	margin-top: 10px;
	padding: 10px;
}

.message {
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    min-height: 70px;
}

.gutter {
    width: 70px;
    padding-right: 8px;
    float: left;
    height: 100%;
}

p {
    margin-bottom: 10px;
}

.avatar {
    border-radius: 3px;
    height: 64px;
    width: 64px;
    line-height: 64px;
}

.reply-avatar {
    border-radius: 3px;
    height: 48px;
    width: 48px;
    line-height: 48px;
}

.username {
    color: #2c2d30;
    display: inline-block;
    text-decoration-color: #2c2d30;
    text-decoration-style: solid;
    font-weight: 900;
    font-family: NotoSansJP, Slack-Lato, appleLogo, sans-serif;
}

.header {
    margin-bottom: 10px;
}

.timestamp {
    color: #717274;
    font-size: 12px;
    line-height: 12px;
    margin-left: 10px;
    font-family: NotoSansJP, Slack-Lato, appleLogo, sans-serif;
}

.attachment {
    margin-top: 20px;
    padding-left: 10px;
    border-left: 5px solid #f9f9f9;
}

.attachment .title {
    font-weight: bold;
    color: #0576b9;
    text-decoration: none;
}

.attachment .summary {
    margin-top: 10px;
}

React

class Attachment extends React.Component {
	constructor(props) {
		super(props);
	}
	
	render() {
		return (
		<div className="attachment">
			<a className="title" href={this.props.title_link} target="_blank">{this.props.title}</a>
			<p className="summary">{this.props.text}</p>
			<img src={this.props.image_url} width={this.props.image_width} height={this.props.image_height} />
		</div>);
	}
}
class Message extends React.Component {
  constructor(props) {
    super(props)
   
    const message = {
    	type: 'message',
        user: 'UDFBFU1MY',
        text: 'This is a test message\n\nWith a separate paragraph.\n\n<https://medium.com/ingenious/sending-emails-from-a-create-react-app-dad5756a4ff2>\n\nAnd it had a link in it',
        client_msg_id: '254faf6d-a2ce-497c-80f1-141f2b047043',
        attachments: [ { service_name: 'Medium',
            title: 'Sending emails from a Create-React-App – ingenious – Medium',
            title_link: 'https://medium.com/ingenious/sending-emails-from-a-create-react-app-dad5756a4ff2',
            text: 'A few days ago we added a new Invite people by email feature, to an app we’re developing internally at Ingenious. The app consists of a…',
            fallback: 'Medium: Sending emails from a Create-React-App – ingenious – Medium',
            image_url: 'https://cdn-images-1.medium.com/max/1200/1*IiQuFZskyWATRJBMXGVXkQ.jpeg',
            fields: [ [Object] ],
            ts: 1532032713,
            from_url: 'https://medium.com/ingenious/sending-emails-from-a-create-react-app-dad5756a4ff2',
            image_width: 333,
            image_height: 250,
            image_bytes: 192608,
            service_icon: 'https://cdn-images-1.medium.com/fit/c/304/304/1*9Y7DSWKi-if700-zYZlEog.png',
            id: 1,
            original_url: 'https://medium.com/ingenious/sending-emails-from-a-create-react-app-dad5756a4ff2' } 
        ],
		replies: [{
			avatarUrl: "https://ca.slack-edge.com/TDGL0NYUE-UDFBFU1MY-gaf60a40ce3b-48",
       ...