Send email using Azure Communication Email

1. Install dependencies

Get the react-email package and the Azure Communication Email SDK.

npm install @azure/communication-email react-email

yarn add @azure/communication-email react-email

pnpm add @azure/communication-email react-email

2. Create an email using React

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

email.tsx

import * as React from 'react';
import { Html, Button } from "react-email";

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

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

3. Convert to HTML and send email

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

import { EmailClient } from '@azure/communication-email';
import { render } from 'react-email';
import { Email } from './email';

const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING);

const from ='you@example.com';
const emailHtml = await render(<Email url="https://example.com" />);

const message = {
  senderAddress: from,
  content: {
    subject: 'hello world',
    html: emailHtml,
  },
  recipients: {
    to: [{ address: 'user@gmail.com' }],
  },
};

const poller = await client.beginSend(message);

await poller.pollUntilDone();

Azure Communication Email expects the sender in the senderAddress field.

Try it yourself

Azure Communication Email example

See the full source code.

Send email using AWS SES

Send email using MailerSend

​1. Install dependencies

​2. Create an email using React

​3. Convert to HTML and send email

​Try it yourself

Azure Communication Email example

1. Install dependencies

2. Create an email using React

3. Convert to HTML and send email

Try it yourself