Menu Close


Nest Logo

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

NPM Version
Package License
NPM Downloads


  • ⚡️ 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.


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"
  1. 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: "", port: 2525, secure: false, auth: { user: "", pass: "password", }, }, defaults: { from: '"Webtre Technologies" <>', }, template: { dir: __dirname + "/templates", // Use the adapter adapter: new ReactAdapter(), // Or with optional config adapter: new ReactAdapter({ pretty: false, plainText: true, }), }, }), ], }) export class AppModule {}
  1. Service Provider

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

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

  async public example(): void {
    await this.mailerService
        to: '',
        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',
  1. 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> ); }



MIT License © 2022 Webtre Technologies

View Source Code
Posted in Development