Use with React Email

Introduction

React Email is a library for building emails with React. In this guide, we will show you how to use useSend with React Email.

Install dependencies

npm install usesend-js @react-email/render

yarn add usesend-js @react-email/render

pnpm add usesend-js @react-email/render

bun add usesend-js @react-email/render

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 useSend

import { UseSend } from "usesend-js";
import { render } from "@react-email/render";
import { Email } from "./email";

const usesend = new UseSend("us_your_usesend_api_key");

  const html = await render(<Email url="https://usesend.com" />);

const response = await usesend.emails.send({
  to: "[email protected]",
  from: "[email protected]",
  subject: "useSend 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

Getting Started

Self Hosting

Guides

Use with React Email

Introduction

Install dependencies

Create an email template

Send an email using useSend

Build your project

JavaScript

TypeScript

​Introduction

​Install dependencies

​Create an email template

​Send an email using useSend

​Build your project

​JavaScript

​TypeScript

Introduction

Install dependencies

Create an email template

Send an email using useSend

Build your project

JavaScript

TypeScript