Emails, oy vey!
Render HTML emails on the server with React. Oy provides functionality to:
- Validate props against email best-practices with
Oy
components. - Render templates server-side with
Oy.renderTemplate
.
npm install --save oy-vey
import React from 'react';
import {Table, TBody, TR, TD} from 'oy-vey';
export default (props) => {
return (
<Table width={props.maxWidth}>
<TBody>
<TR>
<TD align="center">
{props.children}
</TD>
</TR>
</TBody>
</Table>
);
};
import React from 'react';
import MyLayout from './layout/MyLayout.jsx';
import BodyText from './modules/BodyText.jsx';
export default (props) => {
return (
<MyLayout>
<BodyText>Welcome to Oy!</BodyText>
</MyLayout>
);
};
For example, if using Express.js:
import express from 'express';
import React from 'react';
import Oy from 'oy-vey';
import GettingStartedEmail from './templates/GettingStartedEmail.jsx';
const server = express();
server.set('port', (process.env.PORT || 8887));
server.get('/email/oy', (req, res) => {
const template = Oy.renderTemplate({
title: 'Getting Started with Foo',
headCSS: '@media ...',
bodyContent: React.renderToStaticMarkup(<GettingStartedEmail />),
previewText: 'Here is your guide...'
});
res.send(template);
});
server.listen(server.get('port'), () => {
console.log('Node server is running on port', server.get('port'));
});
The Oy
namespace exposes the following components validated against email best practices:
Table TBody TR TD Img A
If you want to circumvent this validation, you can use Oy.Element
and pass the tagName
prop to implement your own validated element. If you additionally don’t mind React stripping the attributes below, you can use React DOM Element
objects (i.e. use <table>
instead of <Table>
).
In addition to the attributes supported by React, these HTML attributes are supported on Oy
components:
align background bgColor border vAlign
Oy.renderTemplate
takes an object with the following properties:
title (string, required) - Used by clients if email is opened in a web page.
bodyContent (string, required) - HTML generated by ReactDOMServer.renderToStaticMarkup.
previewText (string, required) - Short description that appears in email clients
headCSS (string, optional) - CSS that belongs in `<head>`
lang (string, optional) - ISO language code
dir (string, optional) - Either 'ltr' or 'rtl'. 'ltr' is the default
# Test
npm test
# Compile from ES6 in src/ to ES5 in lib/
npm run compile
We welcome contributions. If there's some information missing or ideas for how to make Oy better, please send a pull request, file an issue, or email 1.vivekpatel@gmail.com.
The best place to start would be in contributing new rules. A running wishlist of email validation rules are in the Issues section.