mathieutu/nodemailer-react

A simple but powerfull Nodemailer wrapper to send email with React template.

Nodemailer React

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

Installation

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:

yarn add nodemailer react-dom react

Usage

You can find a full example in the example folder, or see the 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.

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

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:

type Email = (props: object) => ({
  subject: string;
  body: ReactElement;
})

Example:

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.

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

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.

However, as Nodemailer does not publish its own types, be sure to install them from DefinitelyTyped repo:

yarn add -D @types/nodemailer

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's Issues

HTML not working

I get a syntax error when I try to use html in my email component.

const notificationEmail = ({ title, message }) => ({ subject: ${title}, html: ( <div> <p> {message}</p> </div> ) })

throws this error.

SyntaxError: Unexpected token '<' at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18) at ESMLoader.moduleProvider (node:internal/modules/esm/loader:475:14) [nodemon] app crashed - waiting for file changes before starting...

Running from a windows env

PS C:\Projects\support\appsupp\server> node -v
v16.17.1

Any ideas?

Update nodemailer peer dep version

currently when trying to update packages with npm update it causes issues when it trys to update nodemailer to 6.7.2

Preview the message

Generate a html preview of the email.

Non html mail as backup

Is it also possible to add a nonhtml text only email as backup to be sent?

Thanks!

I'd really love to see a more generic example

I think this is exactly the library I need, but I'm having trouble following the docs.

I have an app running on heroku that I would like to be able to send emails from gmail.

It's a dice rolling app, so people playing games remotely can roll dice fairly and share the results.

Dump the message as Json

Instead of send it, dump it directly.
Directly by the JsonTransport maybe?

Automatic Text version

It should be cool to be able to generate automatically the text version of the email.

Having issue making this work in frontend

I have a react application from which I would like to directly configure the SMTP settings and send an email. I know that nodemailer needs to be configured in the backend and doesn't work when used in the frontend. I expected this package to resolve that limitation and allow the user to send an email directly from the frontend code without any operation from the backend.

However, when I try to run the application I get this error

error - ./node_modules/nodemailer/lib/sendmail-transport/index.js:3:0
Module not found: Can't resolve 'child_process'

This package also has a dependency with nodemailer, so does that mean the intended use for this package is only on the backend side? From the docs and examples it seems that we can use this on the frontend as well.

Any help is highly appreciated.

Vulnerable nodemailer version (^5.1.1)

From npm audit:

nodemailer  <=6.6.0
Severity: critical
Command injection in nodemailer - https://github.com/advisories/GHSA-48ww-j4fc-435p
Header injection in nodemailer - https://github.com/advisories/GHSA-hwqf-gcqm-7353
No fix available
node_modules/nodemailer
  nodemailer-react  *
  Depends on vulnerable versions of nodemailer
  node_modules/nodemailer-react

I've tried to fork the repo and bump versions, but it seems I cannot build the module with my current setup (I'm on windows with no Linux available ATM).

Is there any known reason not to bump the nodemailer version?