mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
113 lines
2.3 KiB
Plaintext
113 lines
2.3 KiB
Plaintext
---
|
|
title: "Send email using Scaleway Transactional Email"
|
|
sidebarTitle: "Scaleway"
|
|
description: "Learn how to send an email using React Email and the Scaleway Node.js SDK."
|
|
"og:image": "https://react.email/static/covers/react-email.png"
|
|
---
|
|
|
|
## 1. Install dependencies
|
|
|
|
Get the [react-email](https://www.npmjs.com/package/react-email) package and the [Scaleway Node.js SDK](https://www.npmjs.com/package/@scaleway/sdk).
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install @scaleway/sdk react-email
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add @scaleway/sdk react-email
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add @scaleway/sdk react-email
|
|
```
|
|
|
|
</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";
|
|
|
|
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 Scaleway SDK to send it.
|
|
|
|
```tsx
|
|
import { render } from "react-email";
|
|
import { TransactionalEmail, createClient } from "@scaleway/sdk";
|
|
import { Email } from "./email";
|
|
|
|
const client = createClient({
|
|
accessKey: process.env.ACCESS_KEY,
|
|
secretKey: process.env.SECRET_KEY,
|
|
defaultProjectId: process.env.PROJECT_ID,
|
|
defaultRegion: "fr-par",
|
|
defaultZone: "fr-par-1",
|
|
});
|
|
|
|
const transactionalEmailClient = new TransactionalEmail.v1alpha1.API(client);
|
|
|
|
const emailHtml = await render(<Email url="https://example.com" />);
|
|
|
|
const sender = {
|
|
email: "react-email@transactional.email.fr",
|
|
subject: "TEST",
|
|
name: "Team",
|
|
};
|
|
|
|
const userInvited = {
|
|
email: "XXXX@scaleway.com",
|
|
name: "TEST",
|
|
teamName: "Team",
|
|
};
|
|
|
|
const userInvitedBy = {
|
|
email: "XXXX@scaleway.com",
|
|
name: "TEST",
|
|
teamName: "Team",
|
|
};
|
|
|
|
transactionalEmailClient.createEmail({
|
|
from: {
|
|
email: sender.email,
|
|
name: sender.name,
|
|
},
|
|
to: [
|
|
{
|
|
email: userInvited.email,
|
|
name: userInvited.name,
|
|
},
|
|
],
|
|
subject: sender.subject,
|
|
text: null,
|
|
html: emailHtml,
|
|
});
|
|
```
|
|
|
|
## Try it yourself
|
|
|
|
<Card
|
|
title="Scaleway Transactional Email"
|
|
icon="arrow-up-right-from-square"
|
|
iconType="duotone"
|
|
href="https://github.com/resend/react-email/tree/main/examples/scaleway"
|
|
>
|
|
See the full source code.
|
|
</Card>
|