mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
83 lines
1.7 KiB
Plaintext
83 lines
1.7 KiB
Plaintext
---
|
|
title: "Send email using Lettermint"
|
|
sidebarTitle: "Lettermint"
|
|
description: "Learn how to send an email using React Email and the Lettermint 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 [Lettermint Node.js SDK](https://www.npmjs.com/package/lettermint).
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install lettermint react-email
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add lettermint react-email
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add lettermint react-email
|
|
```
|
|
|
|
```sh bun
|
|
bun add lettermint 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 { Button, Html } from "react-email";
|
|
|
|
interface EmailProps {
|
|
url: string;
|
|
}
|
|
|
|
export function Email({ url }: EmailProps) {
|
|
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 Lettermint SDK to send it.
|
|
|
|
```tsx
|
|
import { Lettermint } from "lettermint";
|
|
import { render } from "react-email";
|
|
import { Email } from "./email";
|
|
|
|
const email = Lettermint.email(process.env.LETTERMINT_SENDING_TOKEN);
|
|
|
|
const emailHtml = await render(<Email url="https://example.com" />);
|
|
|
|
await email
|
|
.from("you@example.com")
|
|
.to("user@gmail.com")
|
|
.subject("hello world")
|
|
.html(emailHtml)
|
|
.send();
|
|
```
|
|
|
|
## Try it yourself
|
|
|
|
<Card
|
|
title="Lettermint example"
|
|
icon="arrow-up-right-from-square"
|
|
iconType="duotone"
|
|
href="https://github.com/resend/react-email/tree/main/examples/lettermint"
|
|
>
|
|
See the full source code.
|
|
</Card>
|