mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Syed Ibrahim Ali
112 lines
2.6 KiB
Plaintext
112 lines
2.6 KiB
Plaintext
---
|
|
title: 'Send (& receive) emails using Inbound'
|
|
sidebarTitle: 'Inbound'
|
|
description: 'Learn how to send and receive emails using React Email and the Inbound 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 [Inbound Node.js SDK](https://www.npmjs.com/package/inboundemail).
|
|
|
|
Make sure you have an account on [inbound](https://inbound.new?utm_source=react-email%20docs&utm_medium=email&utm_campaign=react_email_campaign), you will need an inbound API key.
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install inboundemail react-email
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add inboundemail react-email
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add inboundemail react-email
|
|
```
|
|
|
|
```sh bun
|
|
bun add inboundemail 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>
|
|
);
|
|
}
|
|
|
|
export default Email;
|
|
```
|
|
|
|
## 3. Send email
|
|
|
|
<Info>When integrating with other services, you need to convert your React template into HTML before sending. Inbound takes care of that for you. You can just directly pass the React template to the SDK.</Info>
|
|
|
|
Import the email template you just built and use the Inbound SDK to send it.
|
|
|
|
```tsx
|
|
import { Inbound } from 'inboundemail';
|
|
import { Email } from './email';
|
|
|
|
const inbound = new Inbound(process.env.INBOUND_API_KEY);
|
|
|
|
await inbound.emails.send({
|
|
from: 'you@example.com',
|
|
to: 'user@gmail.com',
|
|
subject: 'hello world',
|
|
react: <Email url="https://example.com" />,
|
|
});
|
|
```
|
|
|
|
## 4. Reply to an email
|
|
|
|
Use the Inbound SDK to reply to an email with the same template you just created.
|
|
|
|
```tsx
|
|
import { Inbound } from 'inboundemail';
|
|
import { Email } from './email';
|
|
|
|
const inbound = new Inbound({
|
|
apiKey: process.env.INBOUND_API_KEY
|
|
});
|
|
|
|
// sending an email via inbound
|
|
await inbound.emails.send(email.id,{
|
|
from: "React Email <react.email@inbound.new>",
|
|
react: <Email url="https://example.com" />
|
|
});
|
|
|
|
// replying to an email that was received via inbound
|
|
await inbound.emails.reply(email.id,{
|
|
from: "React Email <react.email@inbound.new>",
|
|
react: <Email url="https://example.com" />
|
|
});
|
|
|
|
|
|
```
|
|
|
|
## Try it yourself
|
|
|
|
<Card
|
|
title="Get started on Inbound"
|
|
icon='arrow-up-right-from-square'
|
|
iconType="duotone"
|
|
href="https://inbound.new?utm_source=react-email%20docs&utm_medium=email&utm_campaign=react_email_campaign"
|
|
>
|
|
See it on our examples.
|
|
</Card>
|