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..6275e5b492 --- /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. + +## 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..3c49031131 --- /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 = '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(); diff --git a/examples/azure-communication-email/tsconfig.json b/examples/azure-communication-email/tsconfig.json new file mode 100644 index 0000000000..e5f61695a0 --- /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"] +}