Back to jobs

Sends an email built using React with Resend

Trigger: eventTrigger

This job sends a basic email built using React & Typescript to a 'to' email address, a 'subject', a 'text' field and a 'from' email address.

Integrations:

Resend

/src/resendSendReactEmail

Marketing

1
// src/resendSendReactEmail.tsx
2


3
import { TriggerClient, eventTrigger } from "@trigger.dev/sdk";
4
import { Resend } from "@trigger.dev/resend";
5
import { z } from "zod";
6


7
// react-email imports
8
import { Html } from "@react-email/html";
9
import { Head } from "@react-email/head";
10
import { Text } from "@react-email/text";
11
import { Button } from "@react-email/button";
12
import { Section } from "@react-email/section";
13
import { Preview } from "@react-email/preview";
14
import { Container } from "@react-email/container";
15


16
const client = new TriggerClient({ id: "jobs-showcase" });
17


18
const resend = new Resend({
19
  id: "resend",
20
  apiKey: process.env.RESEND_API_KEY!,
21
});
22


23
// Email styling
24
const container = {
25
  width: "480px",
26
  margin: "0 auto",
27
  padding: "20px 0 48px",
28
};
29


30
const title = {
31
  fontSize: "24px",
32
  lineHeight: 1.25,
33
};
34


35
const section = {
36
  padding: "24px",
37
  border: "solid 1px #dedede",
38
  borderRadius: "5px",
39
  textAlign: "center" as const,
40
};
41


42
const text = {
43
  margin: "0 0 10px 0",
44
  textAlign: "left" as const,
45
};
46


47
const button = {
48
  fontSize: "14px",
49
  font: "bold",
50
  backgroundColor: "#28a745",
51
  color: "#fff",
52
  lineHeight: 1.5,
53
  borderRadius: "0.2em",
54
  textAlign: "center" as const,
55
};
56


57
function BasicEmail({ name, text }: { name: string; text: string }) {
58
  return (
59
    <Html>
60
      <Head />
61
      <Preview>Welcome to Acme Inc!</Preview>
62
      <Container style={container}>
63
        <Section style={section}>
64
          <Text>Hey {name}!</Text>
65
          <Text>{text}</Text>
66
          <Button style={button} pY={4} pX={4} href="https://acmecompany.inc/">
67
            Get started
68
          </Button>
69
        </Section>
70
      </Container>
71
    </Html>
72
  );
73
}
74


75
// This job sends a basic email built using React and Typescript
76
client.defineJob({
77
  id: "resend-send-react-email",
78
  name: "Resend: send react email",
79
  version: "1.0.0",
80
  trigger: eventTrigger({
81
    name: "send.email",
82
    schema: z.object({
83
      to: z.string(),
84
      subject: z.string(),
85
      text: z.string(),
86
      name: z.string(),
87
      // The 'from' email address must be a verified domain in your Resend account.
88
      from: z.string(),
89
    }),
90
  }),
91
  integrations: {
92
    resend,
93
  },
94
  run: async (payload, io, ctx) => {
95
    await io.resend.sendEmail("send-email", {
96
      to: payload.to,
97
      subject: payload.subject,
98
      text: payload.text,
99
      from: payload.from,
100
      // BasicEmail is the custom React component that will be used to style the email
101
      react: <BasicEmail name={payload.name} text={payload.text} />,
102
    });
103
  },
104
});
105


106
// These lines can be removed if you don't want to use express
107
import { createExpressServer } from "@trigger.dev/express";
108
createExpressServer(client);