Published on 

Using React Email With Plunk

React Email is the new kid on the block when it comes to creating and styling emails. Their intuitive set of React components makes it easy to create beautiful emails that look good on any device.

In this post, we'll show you how to use React Email together with the Plunk Transactional Email API to send beautiful emails to your users.

Using React Email With Plunk

Installing packages

To start using React Email with Plunk, you'll need to install the following packages using your package manager of choice.

yarn add @plunk/node @react-email/render @react-email/html @react-email/button

Creating a template

Using React Email is easy. You can create a template by creating a new file and adding a new component to it. Components behave just like in React, they can have state and props.

Inside the component, you can leverage the installed React Email components to create your template. In our example we have installed the @react-email/html and @react-email/button packages. We can use these to create a simple template.

Some of the other components you can use are:

  • @react-email/container
  • @react-email/section
  • @react-email/link
  • @react-email/heading
1import * as React from 'react';
2import { Html } from '@react-email/html';
3import { Button } from '@react-email/button';
4
5
6export default function Email(props) {
7    const { url } = props;
8
9    return (
10        <Html lang="en">
11            <Button href={url}>Click me</Button>
12        </Html>
13    );
14}
15

Converting and sending

Once your template is ready, all that is left to do is to convert it to HTML and send it using the Plunk Transactional Email API. Use the @react-email/render package to convert your template to HTML.

1import { render } from '@react-email/render';
2import { Email } from './Email';
3import Plunk from '@plunk/node';
4
5const plunk = new Plunk("YOUR_API_KEY");
6
7const html = render(<Email url="https://example.com" />);
8
9await plunk.emails.send({
10    to: "hello@useplunk.com",
11    subject: "Hello from Plunk",
12    html
13});

Want to learn more?

If you want to learn more about Plunk, check out our documentation. More information about React Email, including a full list of components and templates, can be found on their website