Skip to content

Commit 6c9d108

Browse files
gabrielmferngabrielmfern
authored
feat: Refactored examples (#1675)
1 parent b2aa82e commit 6c9d108

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1917
-507
lines changed

‎apps/docs/integrations/aws-ses.mdx

Lines changed: 5 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ pnpm add @aws-sdk/client-ses @react-email/components
2929

3030
Start by building your email template in a `.jsx` or `.tsx` file.
3131

32-
```jsx email.jsx
32+
```tsx email.tsx
3333
import * as React from 'react';
3434
import { Html, Button } from "@react-email/components";
3535

@@ -46,11 +46,10 @@ export function Email(props) {
4646

4747
## 3. Convert to HTML and send email
4848

49-
Import the email template you just built, convert into a HTML string, and use the AWS SES SDK to send it.
49+
Import the email template you just built, convert into an HTML string, and use the AWS SES SDK to send it.
5050

51-
<CodeGroup>
52-
53-
```js React
51+
```tsx
52+
import type { SendEmailCommandInput } from "@aws-sdk/client-ses";
5453
import { render } from '@react-email/components';
5554
import { SES } from '@aws-sdk/client-ses';
5655
import { Email } from './email';
@@ -59,38 +58,7 @@ const ses = new SES({ region: process.env.AWS_SES_REGION })
5958

6059
const emailHtml = await render(<Email url="https://example.com" />);
6160

62-
const params = {
63-
Source: '[email protected]',
64-
Destination: {
65-
ToAddresses: ['[email protected]'],
66-
},
67-
Message: {
68-
Body: {
69-
Html: {
70-
Charset: 'UTF-8',
71-
Data: emailHtml,
72-
},
73-
},
74-
Subject: {
75-
Charset: 'UTF-8',
76-
Data: 'hello world',
77-
},
78-
},
79-
};
80-
81-
await ses.sendEmail(params);
82-
```
83-
84-
```js NodeJS
85-
import { render } from '@react-email/components';
86-
import { SES } from '@aws-sdk/client-ses';
87-
import { Email } from './email';
88-
89-
const ses = new SES({ region: process.env.AWS_SES_REGION })
90-
91-
const emailHtml = await render(Email({ url:"https://example.com" }));
92-
93-
const params = {
61+
const params: SendEmailCommandInput = {
9462
Source: '[email protected]',
9563
Destination: {
9664
ToAddresses: ['[email protected]'],
@@ -112,8 +80,6 @@ const params = {
11280
await ses.sendEmail(params);
11381
```
11482

115-
</CodeGroup>
116-
11783
## Try it yourself
11884

11985
<Card

‎apps/docs/integrations/mailersend.mdx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ pnpm add mailersend @react-email/components
2929

3030
Start by building your email template in a `.jsx` or `.tsx` file.
3131

32-
```jsx email.jsx
32+
```tsx email.tsx
3333
import * as React from 'react';
3434
import { Html, Button } from "@react-email/components";
3535

@@ -46,10 +46,9 @@ export function Email(props) {
4646

4747
## 3. Convert to HTML and send email
4848

49-
Import the email template you just built, convert into a HTML string, and use the MailerSend SDK to send it.
49+
Import the email template you just built, convert into an HTML string, and use the MailerSend SDK to send it.
5050

51-
52-
```jsx index.jsx
51+
```tsx
5352
import { render } from '@react-email/components';
5453
import { MailerSend, EmailParams, Sender, Recipient } from "mailersend";
5554
import { Email } from './email';
@@ -71,10 +70,9 @@ const emailParams = new EmailParams()
7170
.setSubject("This is a Subject")
7271
.setHtml(emailHtml)
7372

74-
mailerSend.email.send(emailParams);
73+
await mailerSend.email.send(emailParams);
7574
```
7675

77-
7876
## Try it yourself
7977

8078
<Card

‎apps/docs/integrations/nodemailer.mdx

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ pnpm add nodemailer @react-email/components
2929

3030
Start by building your email template in a `.jsx` or `.tsx` file.
3131

32-
```jsx email.jsx
32+
```tsx email.tsx
3333
import * as React from 'react';
3434
import { Html, Button } from "@react-email/components";
3535

@@ -48,9 +48,7 @@ export function Email(props) {
4848

4949
Import the email template you just built, convert into a HTML string, and use the Nodemailer SDK to send it.
5050

51-
<CodeGroup>
52-
53-
```js React
51+
```tsx
5452
import { render } from '@react-email/components';
5553
import nodemailer from 'nodemailer';
5654
import { Email } from './email';
@@ -77,35 +75,6 @@ const options = {
7775
await transporter.sendMail(options);
7876
```
7977

80-
```js NodeJS
81-
import { render } from '@react-email/components';
82-
import nodemailer from 'nodemailer';
83-
import { Email } from './email';
84-
85-
const transporter = nodemailer.createTransport({
86-
host: 'smtp.forwardemail.net',
87-
port: 465,
88-
secure: true,
89-
auth: {
90-
user: 'my_user',
91-
pass: 'my_password',
92-
},
93-
});
94-
95-
const emailHtml = await render(Email({ url: "https://example.com" }));
96-
97-
const options = {
98-
from: '[email protected]',
99-
to: '[email protected]',
100-
subject: 'hello world',
101-
html: emailHtml,
102-
};
103-
104-
await transporter.sendMail(options);
105-
```
106-
107-
</CodeGroup>
108-
10978
## Try it yourself
11079

11180
<Card

‎apps/docs/integrations/plunk.mdx

Lines changed: 29 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'Send email using Plunk'
3-
sidebarTitle: 'Plunk'
4-
description: 'Learn how to send an email using React Email and the Plunk Node.js SDK.'
5-
'og:image': 'https://react.email/static/covers/react-email.png'
2+
title: "Send email using Plunk"
3+
sidebarTitle: "Plunk"
4+
description: "Learn how to send an email using React Email and the Plunk Node.js SDK."
5+
"og:image": "https://react.email/static/covers/react-email.png"
66
---
77

88
## 1. Install dependencies
@@ -11,26 +11,26 @@ Get the [@react-email/components](https://www.npmjs.com/package/@react-email/com
1111

1212
<CodeGroup>
1313

14-
```sh npm
15-
npm install @plunk/node @react-email/components
16-
```
14+
```sh npm
15+
npm install @plunk/node @react-email/components
16+
```
1717

18-
```sh yarn
19-
yarn add @plunk/node @react-email/components
20-
```
18+
```sh yarn
19+
yarn add @plunk/node @react-email/components
20+
```
2121

22-
```sh pnpm
23-
pnpm add @plunk/node @react-email/components
24-
```
22+
```sh pnpm
23+
pnpm add @plunk/node @react-email/components
24+
```
2525

2626
</CodeGroup>
2727

2828
## 2. Create an email using React
2929

3030
Start by building your email template in a `.jsx` or `.tsx` file.
3131

32-
```jsx email.jsx
33-
import * as React from 'react';
32+
```tsx email.tsx
33+
import * as React from "react";
3434
import { Html, Button } from "@react-email/components";
3535

3636
export function Email(props) {
@@ -48,49 +48,29 @@ export default Email;
4848

4949
## 3. Convert to HTML and send email
5050

51-
Import the email template you just built, convert into a HTML string, and use the Plunk SDK to send it.
52-
53-
<CodeGroup>
54-
55-
```js React
56-
import Plunk from '@plunk/node';
57-
import { render } from '@react-email/components';
58-
import { Email } from './email';
51+
Import the email template you just built, convert into an HTML string, and use the Plunk SDK to send it.
5952

60-
const plunk = new Plunk(process.env.PLUNK_API_KEY);
53+
```tsx
54+
import Plunk from "@plunk/node";
55+
import { render } from "@react-email/components";
56+
import { Email } from "./email";
6157

62-
const emailHtml = await render(<Email url="https://example.com" />);
58+
const plunk = new Plunk(process.env.PLUNK_API_KEY);
6359

64-
plunk.emails.send({
65-
to: "[email protected]",
66-
subject: "Hello world",
67-
body: emailHtml,
68-
});
69-
```
60+
const emailHtml = await render(<Email url="https://example.com" />);
7061

71-
```js NodeJS
72-
import Plunk from '@plunk/node';
73-
import { render } from '@react-email/components';
74-
import { Email } from './email';
75-
76-
const plunk = new Plunk(process.env.PLUNK_API_KEY);
77-
78-
const emailHtml = await render(Email({ url: "https://example.com" }));
79-
80-
plunk.emails.send({
81-
to: "[email protected]",
82-
subject: "Hello world",
83-
body: emailHtml,
84-
});
85-
```
86-
87-
</CodeGroup>
62+
plunk.emails.send({
63+
to: "[email protected]",
64+
subject: "Hello world",
65+
body: emailHtml,
66+
});
67+
```
8868

8969
## Try it yourself
9070

9171
<Card
9272
title="Plunk example"
93-
icon='arrow-up-right-from-square'
73+
icon="arrow-up-right-from-square"
9474
iconType="duotone"
9575
href="https://github.com/resend/react-email/tree/main/examples/plunk"
9676
>

‎apps/docs/integrations/postmark.mdx

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ pnpm add postmark @react-email/components
2929

3030
Start by building your email template in a `.jsx` or `.tsx` file.
3131

32-
```jsx email.jsx
32+
```tsx email.tsx
3333
import * as React from 'react';
3434
import { Html, Button } from "@react-email/components";
3535

@@ -46,11 +46,9 @@ export function Email(props) {
4646

4747
## 3. Convert to HTML and send email
4848

49-
Import the email template you just built, convert into a HTML string, and use the Postmark SDK to send it.
49+
Import the email template you just built, convert into an HTML string, and use the Postmark SDK to send it.
5050

51-
<CodeGroup>
52-
53-
```js React
51+
```tsx
5452
import { render } from '@react-email/components';
5553
import postmark from 'postmark';
5654
import { Email } from './email';
@@ -66,30 +64,9 @@ const options = {
6664
HtmlBody: emailHtml,
6765
};
6866

69-
client.sendEmail(options);
70-
```
71-
72-
```js NodeJS
73-
import { render } from '@react-email/components';
74-
import postmark from 'postmark';
75-
import { Email } from './email';
76-
77-
const client = new postmark.ServerClient(process.env.POSTMARK_API_KEY);
78-
79-
const emailHtml = await render(Email({ url: "https://example.com" }));
80-
81-
const options = {
82-
From: '[email protected]',
83-
To: '[email protected]',
84-
Subject: 'hello world',
85-
HtmlBody: emailHtml,
86-
};
87-
88-
client.sendEmail(options);
67+
await client.sendEmail(options);
8968
```
9069

91-
</CodeGroup>
92-
9370
## Try it yourself
9471

9572
<Card

‎apps/docs/integrations/resend.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ pnpm add resend @react-email/components
3131

3232
Start by building your email template in a `.jsx` or `.tsx` file.
3333

34-
```jsx email.jsx
34+
```tsx email.tsx
3535
import * as React from 'react';
3636
import { Html, Button } from "@react-email/components";
3737

@@ -54,7 +54,7 @@ export default Email;
5454

5555
Import the email template you just built and use the Resend SDK to send it.
5656

57-
```jsx index.jsx
57+
```tsx
5858
import { Resend } from 'resend';
5959
import { Email } from './email';
6060

0 commit comments

Comments
 (0)