MailerSend
Integrations

Build and send emails using React and TypeScript

Create your emails using React components and send them with MailerSend!
Developer
MailerSend
Price

Free to use under the MIT license

Last Updated

02/03/2023

Integration Support

Check out their docs, or join their Discord.

Additional details

See examples of emails built with React components.

React Email is a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails with dark mode support. It also handles inconsistencies between Gmail, Outlook, and other email clients.

Get started

Install dependencies

Get the @react-email/render package and the MailerSend Node.js SDK.

npm install @react-email/render mailersend

Create an email using React

Start by building your email template in a .jsx or .tsx file.

import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}

Convert to HTML and send email

Import the email template you just built, convert it into an HTML string, and use the MailerSend SDK to send it.

import { render } from '@react-email/render';
import { MailerSend, EmailParams, Sender, Recipient } from "mailersend";
import { Email } from './email';

const mailerSend = new MailerSend({
  apiKey: process.env.MAILERSEND_API_KEY || '',
});

const emailHtml = render(<Email url="https://example.com" />);

const sentFrom = new Sender("you@yourdomain.com", "Your name");
const recipients = [
  new Recipient("your@client.com", "Your Client")
];

const emailParams = new EmailParams()
  .setFrom(sentFrom)
  .setTo(recipients)
  .setSubject("This is a Subject")
  .setHtml(emailHtml)

mailerSend.email.send(emailParams);