Keystone email
This is the last active development release of this package as Keystone 5 is now in a 6 to 12 month active maintenance phase. For more information please read our Keystone 5 and beyond post.
Send emails via various transports, rendered with Express-compatible
renderers. Powered by keystone-email.
Installation
yarn add @keystonejs/email
# or
npm install @keystonejs/email
Transports
See keystone-email for supported
transports and options.
Renderers
Express-compatible renderers should work out of the box
(as long as they export an __express key)
React / jsx
There is a jsx renderer powered by express-react-views.
const { emailSender } = require('@keystonejs/email');
const jsxEmailSender = emailSender.jsx({
// The directory containing the email templates
root: `${__dirname}/emails`,
// The transport to send the emails (see `keystone-email` docs)
transport: 'mailgun'
});
await jsxEmailSender('new-user.jsx').send(
{ ... }, // renderer props
{ ... }, // transport options (api keys, to/from, etc). See `keystone-email` docs
);
const React = require('react');
const UserTemplate = ({ name }) => {
return (
<html>
<body>
<div>Hello {name}</div>
</body>
</html>
);
};
module.exports = UserTemplate;
Note: The
jsxrenderer has a peer dependency onreactandreact-dom
mjml
There is support for mjml-react
using the mjml renderer.
const { emailSender } = require('@keystonejs/email');
const mjmlEmailSender = emailSender.mjml({
// The directory containing the email templates
root: `${__dirname}/emails`,
// The transport to send the emails (see `keystone-email` docs)
transport: 'mailgun'
});
// NOTE: The `.jsx` extension is still used here
await mjmlEmailSender('new-user.jsx').send(
{ ... }, // renderer props
{ ... }, // transport options (api keys, to/from, etc). See `keystone-email` docs
);
const React = require('react');
const { Mjml, MjmlBody, MjmlSection, MjmlColumn, MjmlText } = require('mjml-react');
const UserTemplate = ({ name }) => {
return (
<Mjml>
<MjmlBody width={500}>
<MjmlSection fullWidth backgroundColor="#efefef">
<MjmlColumn>
<MjmlText>Hello {name}!</MjmlText>
</MjmlColumn>
</MjmlSection>
</MjmlBody>
</Mjml>
);
};
module.exports = UserTemplate;
Note: The
mjmlrenderer has a peer dependency onreact,react-dom, andmjml-react
Pug (previously Jade)
const { emailSender } = require('@keystonejs/email');
const pugEmailSender = emailSender.pug({
// The directory containing the email templates
root: `${__dirname}/emails`,
// The transport to send the emails (see `keystone-email` docs)
transport: 'mailgun'
});
await pugEmailSender('new-user.pug').send(
{ ... }, // renderer props
{ ... }, // transport options (api keys, to/from, etc). See `keystone-email` docs
);
Other renderers
Above are examples of using 2 renderers, jsx, and pug.
In general, renderers are available directly on the exported object:
const { emailSender } = require('@keystonejs/email');
emailSender.<renderer>(...);
While you're able to access any renderer this way, not every package will work.
Under the hood, keystone-email will call require(<renderer>), then use the
__express export. ie; any compatible express renderer should work as long as
it's in your dependencies.
See keystone-email for more.