nestjs-mailer-react-adapter

📨 Build and send emails in Nest framework using React.js

Features

⚡️ Write you mail templates in React and TypeScript
🦾 Write testable mail templates intended for mail clients.
⛔ No more template not found or sending blank emails.
⛔ No more issues of missing context / variables from template.
💌 Built on react-email – it reduces the pain of coding responsive emails with dark mode support.

Installation

This library is an adapter for the @nestjs-modules/mailer module. If you’re yet to have it installed, do so by running the command below.

npm install @nestjs-modules/mailer nodemailer

Then install this library

npm install @webtre/nestjs-mailer-react-adapter

Getting Started

To add support for react, ensure this is present under compiler options in your tsconfig.json

  "jsx": "react-jsx"

Configuration

// src/app.module.ts
import { Module } from "@nestjs/common";
import { MailerModule } from "@nestjs-modules/mailer";
import { ReactAdapter } from "@webtre/nestjs-mailer-react-adapter";

@Module({
  imports: [
    MailerModule.forRoot({
      transport: {
        host: "smtp.domain.com",
        port: 2525,
        secure: false,
        auth: {
          user: "user@domain.com",
          pass: "password",
        },
      },
      defaults: {
        from: '"Webtre Technologies" <hello@domain.com>',
      },
      template: {
        dir: __dirname + "/templates",
        // Use the adapter
        adapter: new ReactAdapter(),
        // Or with optional config
        adapter: new ReactAdapter({
          pretty: false,
          plainText: true,
        }),
      },
    }),
  ],
})
export class AppModule {}

Service Provider

import { Injectable } from '@nestjs/common';
import { MailerService } from '@nestjs-modules/mailer';

@Injectable()
export class ExampleService {
  constructor(private readonly mailerService: MailerService) {}

  async public example(): void {
    await this.mailerService
      .sendMail({
        to: 'john@domain.com',
        subject: 'Testing react template',
        template: 'welcome', // The compiled extension is appended automatically.
        context: {
          // Data to be passed as props to your template.
          code: '123456',
          name: 'John Doe',
        },
      });
  }
}

React Template (ensure its a default export)

// src/templates/welcome.tsx
interface WelcomeProps {
  code: string;
  name: string;
}

export default function Welcome({ name, code }: WelcomeProps) {
  return (
    <div>
      Hi {name}, thanks for signing up. Your code is {code}
    </div>
  );
}

Credits

react-email – build and send emails using React
@nestjs-modules/mailer – a mailer module for Nest framework (node.js)

License

View Source Code

Post Views: 74