react-mail-vercel
Advanced tools
📧 Send free transactional emails using Vercel Edge Functions + MailChannels via Cloudflare
react-mail-vercel lets you send transactional emails for free directly from your Vercel Edge Functions, leveraging MailChannels via Cloudflare’s outbound email proxy.
➡️ No third-party services, no accounts, no costs.
npm install react-mail-vercel
### Create a new edge function
```typescript
// If you're using App directory
export const runtime = 'edge';
// If you're using Pages directory
export const config = {
runtime: 'edge',
};
import Email from 'react-mail-vercel';
SPF is a DNS record that helps prevent email spoofing. You will need to add an SPF record to your domain to allow MailChannels to send emails on your behalf.
TXT record to your domain with the following values:
@v=spf1 a mx include:relay.mailchannels.net ~allThis step is optional, but highly recommended. DKIM is a DNS record that helps prevent email spoofing. You may follow the steps listed in the MailChannels documentation to set up DKIM for your domain.
The Most basic request would look like this:
await Email.send({
to: 'john@example.com',
from: 'me@example.com',
subject: 'Hello World',
text: 'Hello World',
});
You can also send HTML emails by adding an html parameter to the request. This can be used in conjunction with the text parameter to send a multi-part email.
await Email.send({
to: 'john@example.com',
from: 'me@example.com',
subject: 'Hello World',
html: '<h1>Hello World</h1>',
});
You can also specify a sender and recipient name by adding a name parameter to the request. This can be used for both the to and from parameters.
await Email.send({
to: { email: 'john@example.com', name: 'John Doe' },
from: { email: 'me@example.com', name: 'Jane Doe' },
subject: 'Hello World',
text: 'Hello World',
});
You may also send to multiple recipients by passing an array of eamils, or an array of objects with email and name properties.
await Email.send({
to: ['john@example.com', 'rose@example.com'],
from: 'me@example.com',
subject: 'Hello World',
text: 'Hello World',
});
or
await Email.send({
to: [
{ email: 'john@example.com', name: 'John Doe' },
{ email: 'rose@example.com', name: 'Rose Doe' },
],
from: 'me@example.com',
subject: 'Hello World',
text: 'Hello World',
});
You can also send BCC and CC emails by passing an array of eamils, an object with email and name properties, or an array of either, similar to the to parameter.
await Email.send({
to: 'john@example.com',
from: 'me@example.com',
subject: 'Hello World',
text: 'Hello World',
cc: ['jim@example.com', 'rose@example.com'],
bcc: ['gil@example.com'],
});
You can also specify a reply to email address by adding a replyTo parameter to the request. Again, you can use an email string, an object with email and name properties, or an array of either.
await Email.send({
to: 'john@example.com',
from: 'me@example.com',
replyTo: 'support@example.com',
subject: 'Hello World',
text: 'Hello World',
});
FAQs
A simple free transactional mail
We found that react-mail-vercel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.