React-email-blueprints NPM

react-email-blueprints

:mailbox_with_mail: Collection of React components for server-side e-mail template rendering

Installation

npm install react-email-blueprints

Example

import React from 'react';
import ReactDOM from 'react-dom/server';
import { Layout, Body, Spacer, Logo, Widget, Footer, H2, H3 } from 'react-email-blueprints';

const MyEmail = function(props) {
  return (
    <Layout.Mail imageBase={props.imageBase}>
      <Body>
        <Spacer imageBase={props.imageBase} />
        <Logo imageBase={props.imageBase} />
        <Spacer imageBase={props.imageBase} />
        <Widget width="100%">
          <H2>This is an e-mail</H2>
          <H3>More text in this e-mail, much more text, much much more text.</H3>
        </Widget>
      </Body>
      <Footer imageBase={props.imageBase} />
      <Spacer imageBase={props.imageBase} />
    </Layout.Mail>
  );
};

ReactDOM.renderToStaticMarkup(<MyEmail imageBase="http://mysite.com" />);

Alternatives

Oy (https://github.com/revivek/oy): Another solution to render e-mails with React
MJML (https://mjml.io/): If you don't like React, but want an easier way to describe e-mails in a markup language

License

MIT

email e-mail react server render

lodash.omit react

@infinitebrahmanuniverse/nolb-react-em @everything-registry/sub-chunk-2553

1.0.1

8 years ago

1.0.0

8 years ago