Introduction
React Email is a library for building emails with React. In this guide, we will show you how to use Unsend with React Email.
Install dependencies
Create an email template
import * as React from "react";
import { Html } from "@react-email/html";
import { Button } from "@react-email/button";
export function Email(props) {
const { url } = props;
return (
<Html lang="en">
<Button href={url}>Click me</Button>
</Html>
);
}
Send an email using Unsend
import { Unsend } from "unsend";
import { render } from "@react-email/render";
import { Email } from "./email";
const unsend = new Unsend("us_your_unsend_api_key");
const html = await render(<Email url="https://unsend.dev" />);
const response = await unsend.emails.send({
to: "[email protected]",
from: "[email protected]",
subject: "Unsend email",
html,
});
Build your project
JavaScript
If you’re using nodejs, importing email.jsx
might fail. make sure to add these to your babel config:
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
Checkout this example
TypeScript
Just add jsx
to your tsconfig.json
{
"compilerOptions": { "jsx": "react-jsx" }
}
Checkout this example