# @rakered/email

> Compose emails using react and send them with nodemailer

Latest version **1.5.0** (published 2021-06-07) · AGPL-3.0 OR COMMERCIAL license · 0 weekly downloads

## Install

```sh
npm install @rakered/email
pnpm add @rakered/email
yarn add @rakered/email
bun add @rakered/email
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2021-06-07 |
| First published | 2021-01-27 |
| Weekly downloads | 0 |
| License | AGPL-3.0 OR COMMERCIAL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 48.3 KB |
| Known vulnerabilities | 0 (+22 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Stephan Meijer |
| Maintainers | smeijer |
| Keywords | nodejs, email, react |

## Links

- npm: https://www.npmjs.com/package/@rakered/email
- Repository: https://github.com/rakered/rakered
- Homepage: https://github.com/rakered/rakered#readme
- Issues: https://github.com/rakered/rakered/issues
- npm.io page: https://npm.io/package/@rakered/email

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^17.0.1
- [exit-hook](https://npm.io/package/exit-hook.md) github:smeijer-forks/exit-hook
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [nodemailer](https://npm.io/package/nodemailer.md) ^6.4.17

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2021-06-07
- 1.4.0 — 2021-04-30
- 1.3.2 — 2021-04-29
- 1.3.1 — 2021-04-01
- 1.3.0 — 2021-03-14
- 1.2.0 — 2021-02-23
- 1.1.0 — 2021-02-18
- 1.0.0 — 2021-01-27

## README

# @rakered/email

Compose emails using react and send them with [nodemailer](https://github.com/nodemailer/nodemailer)

![social image](https://github.com/rakered/rakered/raw/main/packages/email/docs/social.jpg)

## Usage

First, you'll need to create one or more email templates that you wish to send to your uses. For this, you'll be using react and our base components. There are various base elements, and a theme that can be modified to your needs. But let's start with an example of what you need to send a Mail.

### Sending emails

To send emails, you'll need to set `process.env.MAIL_URL` to a valid `smtp` or `smpts` url. When this environment variable is not set, mails will be printed to `stdout` (your terminal/console).

```js
import { send, render } from '@rakered/email';

await send({
  to: 'hunter@example.com',
  from: 'stephan@example.com',
  subject: 'Confirm your account',
  text: 'hi there! Please use the link below to verify…',
  html: render(<ConfirmAccountMail token="gEf…vkJ" />),
});
```

Valid SMTP urls have the following format:

```
# insecure, non ssl:
smtp://username:password@example.com:25

# secure, using ssl
smtps://username:password@example.com:456
```

### Building Templates

It's important to wrap every mail template in the `Email` component, as that components provide the context (theme data) to the various building blocks.

Next, we offer a number of building blocks, such as `Title`, `Paragraph`, and `CallToAction`. These are the components that you want to use to build your template with. Check `/src/template/blocks` if you wish to know all of them.

All basic building blocks make smart use of our grid system, which can be found in `./src/template/layout`. It is possible to use this grid system in your templates as well, but generally speaking, you should not need it.

```js
import {
  CallToAction,
  Content,
  Email,
  Header,
  Paragraph,
  Title,
} from '@rakered/email';

function ConfirmAccountMail({ siteName, siteUrl }) {
  return (
    <Email>
      <Content>
        <Header
          logo="https://example.com/logo.jpg"
          action={{ label: `Go to ${siteName}!`, url: siteUrl }}
        />

        <Title>Complete Registration</Title>

        <Paragraph>
          Please click the button below, to complete your registration
        </Paragraph>

        <CallToAction href={`https://example.com/verify/${token}`}>
          Confirm email
        </CallToAction>
      </Content>
    </Email>
  );
}
```

### Themes

Using the standard theme, your result will look something like this:

![social image](https://github.com/rakered/rakered/raw/main/packages/email/docs/standard-template.jpg)

---
_Source: https://npm.io/package/@rakered/email · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._