From 0cd1cf88980e48baf78293f56435a13b85dabfb6 Mon Sep 17 00:00:00 2001 From: rahulbhadja <41661703+rahulbhadja@users.noreply.github.com> Date: Sun, 22 Mar 2026 03:05:29 -0400 Subject: [PATCH 1/3] add:Azure Communication Email example - Added documentation for Azure Communication Email integration. - Created example for sending emails using Azure Communication Email. - Updated integrations list and snippets to include Azure Communication Email. --- README.md | 1 + apps/docs/docs.json | 1 + .../azure-communication-email.mdx | 88 +++++++++++++++++++ apps/docs/snippets/integrations.mdx | 6 ++ .../azure-communication-email/package.json | 26 ++++++ .../azure-communication-email/src/email.tsx | 13 +++ .../azure-communication-email/src/index.tsx | 23 +++++ .../azure-communication-email/tsconfig.json | 25 ++++++ 8 files changed, 183 insertions(+) create mode 100644 apps/docs/integrations/azure-communication-email.mdx create mode 100644 examples/azure-communication-email/package.json create mode 100644 examples/azure-communication-email/src/email.tsx create mode 100644 examples/azure-communication-email/src/index.tsx create mode 100644 examples/azure-communication-email/tsconfig.json diff --git a/README.md b/README.md index 56b8c4c06d..76f23a44e5 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ Emails built with React Email can be converted into HTML and sent using any emai - [SendGrid](https://github.com/resend/react-email/tree/main/examples/sendgrid) - [Postmark](https://github.com/resend/react-email/tree/main/examples/postmark) - [AWS SES](https://github.com/resend/react-email/tree/main/examples/aws-ses) +- [Azure Communication Email](https://github.com/resend/react-email/tree/main/examples/azure-communication-email) - [Plunk](https://github.com/resend/react-email/tree/main/examples/plunk) - [Scaleway](https://github.com/resend/react-email/tree/main/examples/scaleway) diff --git a/apps/docs/docs.json b/apps/docs/docs.json index adb6f5849e..aa123d47b9 100644 --- a/apps/docs/docs.json +++ b/apps/docs/docs.json @@ -97,6 +97,7 @@ "integrations/sendgrid", "integrations/postmark", "integrations/aws-ses", + "integrations/azure-communication-email", "integrations/mailersend", "integrations/scaleway", "integrations/plunk" diff --git a/apps/docs/integrations/azure-communication-email.mdx b/apps/docs/integrations/azure-communication-email.mdx new file mode 100644 index 0000000000..31bcbdffc6 --- /dev/null +++ b/apps/docs/integrations/azure-communication-email.mdx @@ -0,0 +1,88 @@ +--- +title: 'Send email using Azure Communication Email' +sidebarTitle: 'Azure Communication Email' +description: 'Learn how to send an email using React Email and the Azure Communication Email SDK.' +'og:image': 'https://react.email/static/covers/react-email.png' +--- + +## 1. Install dependencies + +Get the [@react-email/components](https://www.npmjs.com/package/@react-email/components) package and the [Azure Communication Email SDK](https://www.npmjs.com/package/@azure/communication-email). + + + +```sh npm +npm install @azure/communication-email @react-email/components +``` + +```sh yarn +yarn add @azure/communication-email @react-email/components +``` + +```sh pnpm +pnpm add @azure/communication-email @react-email/components +``` + + + +## 2. Create an email using React + +Start by building your email template in a `.jsx` or `.tsx` file. + +```tsx email.tsx +import * as React from 'react'; +import { Html, Button } from "@react-email/components"; + +export function Email(props) { + const { url } = props; + + return ( + + + + ); +} +``` + +## 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. + +```tsx +import { EmailClient } from '@azure/communication-email'; +import { render } from '@react-email/components'; +import { Email } from './email'; + +const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING); + +const from ='you@example.com'; +const emailHtml = await render(); + +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. This example reads `AZURE_EMAIL_FROM` and maps it to the field Azure requires. + +## Try it yourself + + + See the full source code. + diff --git a/apps/docs/snippets/integrations.mdx b/apps/docs/snippets/integrations.mdx index e52ecb4e66..f19cce1b7f 100644 --- a/apps/docs/snippets/integrations.mdx +++ b/apps/docs/snippets/integrations.mdx @@ -14,6 +14,12 @@ Send email using AWS SES + + Send email using Azure Communication Email + Send email using MailerSend diff --git a/examples/azure-communication-email/package.json b/examples/azure-communication-email/package.json new file mode 100644 index 0000000000..f4ab3ca251 --- /dev/null +++ b/examples/azure-communication-email/package.json @@ -0,0 +1,26 @@ +{ + "name": "react-email-with-azure-communication-email", + "license": "MIT", + "private": true, + "sideEffects": false, + "type": "module", + "main": "./dist/index.js", + "files": [ + "dist/**" + ], + "scripts": { + "build": "tsdown src/index.tsx --format esm --target node20", + "dev": "tsdown src/index.tsx --format esm --target node20 --watch", + "clean": "rm -rf dist" + }, + "dependencies": { + "@azure/communication-email": "^1", + "@react-email/components": "catalog:", + "react": "catalog:", + "react-dom": "catalog:" + }, + "devDependencies": { + "tsdown": "catalog:", + "typescript": "catalog:" + } +} diff --git a/examples/azure-communication-email/src/email.tsx b/examples/azure-communication-email/src/email.tsx new file mode 100644 index 0000000000..0b2cd3600f --- /dev/null +++ b/examples/azure-communication-email/src/email.tsx @@ -0,0 +1,13 @@ +import { Button, Html } from '@react-email/components'; + +interface EmailProps { + url: string; +} + +export const Email: React.FC> = ({ url }) => { + return ( + + + + ); +}; diff --git a/examples/azure-communication-email/src/index.tsx b/examples/azure-communication-email/src/index.tsx new file mode 100644 index 0000000000..b11216c662 --- /dev/null +++ b/examples/azure-communication-email/src/index.tsx @@ -0,0 +1,23 @@ +import { EmailClient } from "@azure/communication-email"; +import { render } from "@react-email/components"; +import { Email } from "./email"; + +const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING); + +const from = process.env.AZURE_EMAIL_FROM; +const emailHtml = await render(); + +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(); diff --git a/examples/azure-communication-email/tsconfig.json b/examples/azure-communication-email/tsconfig.json new file mode 100644 index 0000000000..cd14cca157 --- /dev/null +++ b/examples/azure-communication-email/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "composite": false, + "declaration": true, + "declarationMap": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "inlineSources": false, + "isolatedModules": true, + "moduleResolution": "node", + "noUnusedLocals": false, + "noUnusedParameters": false, + "preserveWatchOutput": true, + "skipLibCheck": true, + "strict": true, + "strictNullChecks": true, + "jsx": "react-jsx", + "lib": ["ESNext", "DOM", "DOM.Iterable"], + "module": "ESNext", + "target": "ESNext", + "types": ["vitest/globals"], + }, + "include": ["."], + "exclude": ["dist", "build", "node_modules"], +} From 7a8db6e8fc5628059c722633a1432f76be17d871 Mon Sep 17 00:00:00 2001 From: rahulbhadja <41661703+rahulbhadja@users.noreply.github.com> Date: Sun, 22 Mar 2026 03:08:20 -0400 Subject: [PATCH 2/3] Update Azure Communication Email examples for clarity --- apps/docs/integrations/azure-communication-email.mdx | 2 +- examples/azure-communication-email/src/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/integrations/azure-communication-email.mdx b/apps/docs/integrations/azure-communication-email.mdx index 31bcbdffc6..6275e5b492 100644 --- a/apps/docs/integrations/azure-communication-email.mdx +++ b/apps/docs/integrations/azure-communication-email.mdx @@ -74,7 +74,7 @@ const poller = await client.beginSend(message); await poller.pollUntilDone(); ``` -Azure Communication Email expects the sender in the `senderAddress` field. This example reads `AZURE_EMAIL_FROM` and maps it to the field Azure requires. +Azure Communication Email expects the sender in the `senderAddress` field. ## Try it yourself diff --git a/examples/azure-communication-email/src/index.tsx b/examples/azure-communication-email/src/index.tsx index b11216c662..debe1978e1 100644 --- a/examples/azure-communication-email/src/index.tsx +++ b/examples/azure-communication-email/src/index.tsx @@ -4,7 +4,7 @@ import { Email } from "./email"; const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING); -const from = process.env.AZURE_EMAIL_FROM; +const from = "you@example.com"; const emailHtml = await render(); const message = { From 7ac000804417b89801efd01c186898ac555485e1 Mon Sep 17 00:00:00 2001 From: rahulbhadja <41661703+rahulbhadja@users.noreply.github.com> Date: Sun, 22 Mar 2026 03:14:34 -0400 Subject: [PATCH 3/3] Use single quotes for strings and clean up tsconfig formatting --- examples/azure-communication-email/src/index.tsx | 12 ++++++------ examples/azure-communication-email/tsconfig.json | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/azure-communication-email/src/index.tsx b/examples/azure-communication-email/src/index.tsx index debe1978e1..3c49031131 100644 --- a/examples/azure-communication-email/src/index.tsx +++ b/examples/azure-communication-email/src/index.tsx @@ -1,20 +1,20 @@ -import { EmailClient } from "@azure/communication-email"; -import { render } from "@react-email/components"; -import { Email } from "./email"; +import { EmailClient } from '@azure/communication-email'; +import { render } from '@react-email/components'; +import { Email } from './email'; const client = new EmailClient(process.env.AZURE_EMAIL_CONNECTION_STRING); -const from = "you@example.com"; +const from = 'you@example.com'; const emailHtml = await render(); const message = { senderAddress: from, content: { - subject: "hello world", + subject: 'hello world', html: emailHtml, }, recipients: { - to: [{ address: "user@gmail.com" }], + to: [{ address: 'user@gmail.com' }], }, }; diff --git a/examples/azure-communication-email/tsconfig.json b/examples/azure-communication-email/tsconfig.json index cd14cca157..e5f61695a0 100644 --- a/examples/azure-communication-email/tsconfig.json +++ b/examples/azure-communication-email/tsconfig.json @@ -18,8 +18,8 @@ "lib": ["ESNext", "DOM", "DOM.Iterable"], "module": "ESNext", "target": "ESNext", - "types": ["vitest/globals"], + "types": ["vitest/globals"] }, "include": ["."], - "exclude": ["dist", "build", "node_modules"], + "exclude": ["dist", "build", "node_modules"] }