Skip to content

Add text option #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 117 additions & 115 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,115 +1,117 @@
# Nodemailer React


This package aims to simplify the use of Nodemailer, along with React templating.

## Installation

```bash
yarn add nodemailer-react
```

This package has `nodemailer`, `react-dom` and `react` as Peer Dependencies,
so you'll need to install them if you don't already have them:

```bash
yarn add nodemailer react-dom react
```

## Usage

You can find a full example in the [example](./example) folder,
or see the [tests](./__tests__) to have more details.

### Configure your SMTP transport
An object that defines your connection data.
See https://nodemailer.com/smtp/#general-options for details.

```js
const transport = {
host: 'smtp.example.com',
secure: true,
auth: { user: 'username', pass: 'password' },
}
```

### Configure your defaults
An object that is going to be merged into every message object.
This allows you to specify shared options, for example to set the same from address for every message.
See https://nodemailer.com/message/#common-fields

```js
const defaults = {
from: "[email protected]",
}
```

### Create Email Components
They are basically functions which can take an object of props in parameter and return an object with :
- The `subject` of the email, as string.
- The `body` of the email, as JSX (ReactElement).

The have the following type:
```ts
type Email = (props: object) => ({
subject: string;
body: ReactElement;
})
```

Example:

```jsx
export const WelcomeEmail = ({ firstName }) => ({
subject: `👋 ${firstName}`,
body: (
<div>
<p>Hello {firstName}!</p>
<p>Hope you'll enjoy the package!</p>
</div>
)
})

export const PasswordEmail = /* ... */
export const ReminderEmail = /* ... */
```

### Instantiate the `Mailer` function.
It takes your `transport` and `defaults` configuration as the first parameter,
and a record of your emails components as the second.

```js
import { Mailer } from 'nodemailer-react'

export const mailer = Mailer(
{ transport, defaults },
{ WelcomeEmail, PasswordEmail, ReminderEmail }
)
```

_TIP: you can directly pass a transporter from nodemailer's `createTransport` method as first argument if you prefer._

_TIP 2: you can alias your emails easily : `{ welcome: WelcomeEmail, pwd: PasswordEmail, ... }`._

### Enjoy!
Send mails in your application, by passing:
- Your email template name: key of the email in the record you've provided to the Mailer.
- The props of your email component.
- The options of the email (to, from, attachments, etc.).
See https://nodemailer.com/message/#common-fields

```js
mailer.send('WelcomeEmail', { firstName: 'Mathieu' }, {
to: '[email protected]'
})
```

### Typescript
Everything is fully typed, and you should have full autocompletion and type checking,
within the options, but also components and props attached to them in `send` method.

## License
This nodemailer-react package is an open-sourced software licensed under the MIT license.

## Contributing
Issues and PRs are obviously welcomed and encouraged, both for new features and documentation.
# Nodemailer React


This package aims to simplify the use of Nodemailer, along with React templating.

## Installation

```bash
yarn add nodemailer-react
```

This package has `nodemailer`, `react-dom` and `react` as Peer Dependencies,
so you'll need to install them if you don't already have them:

```bash
yarn add nodemailer react-dom react
```

## Usage

You can find a full example in the [example](./example) folder,
or see the [tests](./__tests__) to have more details.

### Configure your SMTP transport
An object that defines your connection data.
See https://nodemailer.com/smtp/#general-options for details.

```js
const transport = {
host: 'smtp.example.com',
secure: true,
auth: { user: 'username', pass: 'password' },
}
```

### Configure your defaults
An object that is going to be merged into every message object.
This allows you to specify shared options, for example to set the same from address for every message.
See https://nodemailer.com/message/#common-fields

```js
const defaults = {
from: "[email protected]",
}
```

### Create Email Components
They are basically functions which can take an object of props in parameter and return an object with :
- The `subject` of the email, as string.
- The `body` of the email, as JSX (ReactElement).

The have the following type:
```ts
type Email = (props: object) => ({
subject: string;
body: ReactElement;
text?: Mail.Options['text'];
})
```

Example:

```jsx
export const WelcomeEmail = ({ firstName }) => ({
subject: `👋 ${firstName}`,
body: (
<div>
<p>Hello {firstName}!</p>
<p>Hope you'll enjoy the package!</p>
</div>
),
text : `Hello ${firstName}! Hope you'll enjoy the package!`
})

export const PasswordEmail = /* ... */
export const ReminderEmail = /* ... */
```

### Instantiate the `Mailer` function.
It takes your `transport` and `defaults` configuration as the first parameter,
and a record of your emails components as the second.

```js
import { Mailer } from 'nodemailer-react'

export const mailer = Mailer(
{ transport, defaults },
{ WelcomeEmail, PasswordEmail, ReminderEmail }
)
```

_TIP: you can directly pass a transporter from nodemailer's `createTransport` method as first argument if you prefer._

_TIP 2: you can alias your emails easily : `{ welcome: WelcomeEmail, pwd: PasswordEmail, ... }`._

### Enjoy!
Send mails in your application, by passing:
- Your email template name: key of the email in the record you've provided to the Mailer.
- The props of your email component.
- The options of the email (to, from, attachments, etc.).
See https://nodemailer.com/message/#common-fields

```js
mailer.send('WelcomeEmail', { firstName: 'Mathieu' }, {
to: '[email protected]'
})
```

### Typescript
Everything is fully typed, and you should have full autocompletion and type checking,
within the options, but also components and props attached to them in `send` method.

## License
This nodemailer-react package is an open-sourced software licensed under the MIT license.

## Contributing
Issues and PRs are obviously welcomed and encouraged, both for new features and documentation.
121 changes: 63 additions & 58 deletions __tests__/index.spec.jsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,63 @@
import React from 'react'
import { createTransport } from 'nodemailer'
import mailerFactory, { Mailer } from '../src'

const emailsList = {
foo: ({ name }) => ({
subject: `👋 ${name}!`,
body: (
<div>
<p>Hi {name}!</p>
<p>Here's your email!</p>
</div>
),
}),
}

describe('nodemailer-react', () => {
it('sends an email with jsx transpiled', async () => {
const mailer = Mailer({
transport: { jsonTransport: true },
}, emailsList)

const { message } = await mailer.send(
'foo',
{ name: 'Mathieu' },
{ to: 'foo@bar' },
)

expect(JSON.parse(message)).toMatchObject({
to: [{ address: 'foo@bar', name: '' }],
subject: '👋 Mathieu!',
html: '<!DOCTYPE html><div><p>Hi Mathieu!</p><p>Here&#x27;s your email!</p></div>',
})
})

it('allows directly a transport object', async () => {
const transport = createTransport({ jsonTransport: true }, { from: '[email protected]' })

const mailer = Mailer({ transport }, emailsList)

const { message } = await mailer.send(
'foo',
{ name: 'Mathieu' },
{ to: 'foo@bar' },
)

expect(JSON.parse(message)).toMatchObject({
to: [{ address: 'foo@bar', name: '' }],
from: { address: '[email protected]', name: '' },
subject: '👋 Mathieu!',
html: '<!DOCTYPE html><div><p>Hi Mathieu!</p><p>Here&#x27;s your email!</p></div>',
})
})

it('exports default the same Mailer', () => {
expect(mailerFactory).toBe(Mailer)
})
})
import React from 'react'
import { createTransport } from 'nodemailer'
import mailerFactory, { Mailer } from '../src'


const emailsList = {
foo: ({ name }) => ({
subject: `👋 ${name}!`,
body: (
<div>
<p>Hi {name}!</p>
<p>Here's your email!</p>
</div>
),
text: `Hi ${name}! Here's your email!`
}),
}

describe('nodemailer-react', () => {
it('sends an email with jsx transpiled', async () => {
const mailer = Mailer({
transport: { jsonTransport: true },
}, emailsList)

const { message } = await mailer.send(
'foo',
{ name: 'Mathieu' },
{ to: 'foo@bar' },
)

expect(JSON.parse(message)).toMatchObject({
to: [{ address: 'foo@bar', name: '' }],
subject: '👋 Mathieu!',
html: '<!DOCTYPE html><div><p>Hi Mathieu!</p><p>Here&#x27;s your email!</p></div>',
text: 'Hi Mathieu! Here\'s your email!'
})
})

it('allows directly a transport object', async () => {
const transport = createTransport({ jsonTransport: true }, { from: '[email protected]' })

const mailer = Mailer({ transport }, emailsList)

const { message } = await mailer.send(
'foo',
{ name: 'Mathieu' },
{ to: 'foo@bar' },
)


expect(JSON.parse(message)).toMatchObject({
to: [{ address: 'foo@bar', name: '' }],
from: { address: '[email protected]', name: '' },
subject: '👋 Mathieu!',
html: '<!DOCTYPE html><div><p>Hi Mathieu!</p><p>Here&#x27;s your email!</p></div>',
text: 'Hi Mathieu! Here\'s your email!'
})
})

it('exports default the same Mailer', () => {
expect(mailerFactory).toBe(Mailer)
})
})
Loading