feat(integrations): add Azure Communication Email integration example #3102
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -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). | ||||||
|
|
||||||
| <CodeGroup> | ||||||
|
|
||||||
| ```sh npm | ||||||
| npm install @azure/communication-email @react-email/components | ||||||
| ``` | ||||||
|
|
||||||
| ```sh yarn | ||||||
| yarn add @azure/communication-email @react-email/components | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
|
||||||
| ``` | ||||||
|
|
||||||
| ```sh pnpm | ||||||
| pnpm add @azure/communication-email @react-email/components | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
|
||||||
| ``` | ||||||
|
|
||||||
| </CodeGroup> | ||||||
|
|
||||||
| ## 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"; | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
|
||||||
|
|
||||||
| 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. | ||||||
|
|
||||||
| ```tsx | ||||||
| import { EmailClient } from '@azure/communication-email'; | ||||||
| import { render } from '@react-email/components'; | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
|
||||||
| 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(); | ||||||
| ``` | ||||||
|
|
||||||
| <Info>Azure Communication Email expects the sender in the `senderAddress` field.</Info> | ||||||
|
gabrielmfern marked this conversation as resolved.
|
||||||
|
|
||||||
| ## Try it yourself | ||||||
|
|
||||||
| <Card | ||||||
| title="Azure Communication Email example" | ||||||
| icon='arrow-up-right-from-square' | ||||||
| iconType="duotone" | ||||||
| href="https://github.com/resend/react-email/tree/main/examples/azure-communication-email" | ||||||
| > | ||||||
| See the full source code. | ||||||
| </Card> | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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:" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { Button, Html } from '@react-email/components'; | ||
|
|
||
| interface EmailProps { | ||
| url: string; | ||
| } | ||
|
|
||
| export const Email: React.FC<Readonly<EmailProps>> = ({ url }) => { | ||
| return ( | ||
| <Html lang="en"> | ||
| <Button href={url}>Click me</Button> | ||
| </Html> | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(<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); | ||
|
gabrielmfern marked this conversation as resolved.
|
||
|
|
||
| await poller.pollUntilDone(); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"] | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.