Skip to content

Commit 2a6d825

Browse files
D-K-PD-K-P
authored
Added react email example (#1802)
* Added react email docs * Added jsx note * Removed troubleshooting
1 parent fc7e196 commit 2a6d825

File tree

3 files changed

+124
-0
lines changed

3 files changed

+124
-0
lines changed

‎docs/docs.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@
338338
"guides/examples/supabase-database-operations",
339339
"guides/examples/supabase-storage-upload",
340340
"guides/examples/react-pdf",
341+
"guides/examples/react-email",
341342
"guides/examples/resend-email-sequence",
342343
"guides/examples/vercel-ai-sdk",
343344
"guides/examples/vercel-sync-env-vars"

‎docs/guides/examples/react-email.mdx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: "Send emails using React Email"
3+
sidebarTitle: "React Email"
4+
description: "Learn how to send beautiful emails using React Email and Trigger.dev."
5+
---
6+
7+
## Overview
8+
9+
This example demonstrates how to use Trigger.dev to send emails using React Email.
10+
11+
<Note>
12+
This example uses [Resend](https://resend.com) as the email provider. You can use other email
13+
providers like [SendGrid](https://sendgrid.com) or [Loops](https://loops.so) as well. Full list of
14+
their integrations can be found [here](https://react.email/docs/introduction#integrations).
15+
</Note>
16+
17+
## Task code
18+
19+
<Warning>
20+
This email is built using React components. To use React components in your task, it must be a
21+
.tsx file.
22+
</Warning>
23+
24+
```tsx trigger/sendReactEmail.tsx
25+
import { Body, Button, Container, Head, Heading, Html, Preview } from "@react-email/components";
26+
import { logger, task } from "@trigger.dev/sdk/v3";
27+
import { Resend } from "resend";
28+
29+
// Initialize Resend client
30+
const resend = new Resend(process.env.RESEND_API_KEY);
31+
32+
// React Email template component
33+
const EmailTemplate = ({ name, message }: { name: string; message: string }) => (
34+
<Html lang="en">
35+
<Head />
36+
<Preview>New message from {name}</Preview>
37+
<Body style={{ fontFamily: "Arial, sans-serif", margin: "0", padding: "0" }}>
38+
<Container style={{ padding: "20px", maxWidth: "600px" }}>
39+
<Heading>Hello from Acme Inc.</Heading>
40+
<p>Hi {name},</p>
41+
<p>{message}</p>
42+
<Button
43+
href="https://trigger.dev"
44+
style={{
45+
backgroundColor: "#0070f3",
46+
color: "white",
47+
padding: "12px 20px",
48+
borderRadius: "8px",
49+
}}
50+
>
51+
Go to Acme Inc.
52+
</Button>
53+
</Container>
54+
</Body>
55+
</Html>
56+
);
57+
58+
export const sendEmail = task({
59+
id: "send-react-email",
60+
run: async (payload: {
61+
to: string;
62+
name: string;
63+
message: string;
64+
subject: string;
65+
from?: string;
66+
}) => {
67+
try {
68+
logger.info("Sending email using React.email and Resend", {
69+
to: payload.to,
70+
});
71+
72+
// Send the email using Resend
73+
const { data, error } = await resend.emails.send({
74+
// The from address needs to be a verified email address you own
75+
from: payload.from || "[email protected]", // Default from address
76+
to: payload.to,
77+
subject: payload.subject,
78+
react: <EmailTemplate name={payload.name} message={payload.message} />,
79+
});
80+
81+
if (error) {
82+
logger.error("Failed to send email", { error });
83+
throw new Error(`Failed to send email: ${error.message}`);
84+
}
85+
86+
logger.info("Email sent successfully", { emailId: data?.id });
87+
88+
// Return the response from Resend
89+
return {
90+
id: data?.id,
91+
status: "sent",
92+
};
93+
} catch (error) {
94+
logger.error("Unexpected error sending email", { error });
95+
throw error;
96+
}
97+
},
98+
});
99+
```
100+
101+
## How the email should look
102+
103+
This example email should look like this:
104+
![React Email](/images/react-email.png)
105+
106+
This is just a simple implementation, you can customize the email to be as complex as you want. Check out the [React email templates](https://react.email/templates) for more inspiration.
107+
108+
## Testing your task
109+
110+
To test this task in the [dashboard](https://cloud.trigger.dev), you can use the following payload:
111+
112+
```json
113+
{
114+
"to": "[email protected]",
115+
"name": "Jane Doe",
116+
"message": "Thank you for signing up for our service!",
117+
"subject": "Welcome to Acme Inc."
118+
}
119+
```
120+
121+
## Deploying your task
122+
123+
Deploy the task to production using the Trigger.dev CLI `deploy` command.

‎docs/images/react-email.png

13.7 KB
Loading

0 commit comments

Comments
 (0)