React Email took the React community by storm. It’s a great way to build transactional email templates with React. It is fully compatible with Plunk, and works out of the box. In this guide, we’ll show you how to get started with React Email and Plunk.

​
Install dependencies

When using React Email, you can use the Plunk Node.js SDK. Install it with your favorite package manager:

npm i @plunk/node @react-email/render

​
Create a component

Use React Email to create a reusable component. You can find a ton of examples on the React Email website.

import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';

export default function Email(props) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}

​
Convert and send it!

Now that you have a component, use the render function to convert it to HTML, and send it with Plunk.

import Plunk from '@plunk/node';
import { render } from '@react-email/render';
import { Email } from './email';

const plunk = new Plunk("<API_KEY>");

const body = render(<Email url="https://example.com" />);

const success = await plunk.emails.send({
    to: "hello@useplunk.com",
    subject: "Hello world",
    body,
});