Build your email templates with React
Email is one of the prominent elements in the professional world. Sending emails to customers is a way to keep them informed by the update on their shipments. Apart from that, we also use them for these use cases:
- A welcome email on sign-up.
- An update of the shipment delivery date.
- When an invoice is available.
And so on.
To provide the best quality to our customers, making these emails look great is paramount for use. Making a great design is not the problem, but email engines responsible for rendering the email to the users are not great as a browser engine. So, we are limited on the HTML tags we can use to build the template.
In the JavaScript ecosystem, we can use many views engines to build an email template like EJS, Handlebars, Mustache, Pug, etc. The problem with these latter is that they allow dynamic variables and logical expressions in the template, but building the UI is still cumbersome.
Fortunately, a package solves this problem by abstracting the complexity that comes with building email with HTML tags. This library is react-html-email.
We will see how to build an email template with react-html-email and send an email to a recipient using this template.
Disclaimer : react-html-email is not maintained anymore.
Prerequesites
We will use Node.js 10+ and Typescript for this tutorial so, make sure to have them installed on your computer before you continue.
Initialize a React project
We use the create-react-app package to bootstrap our React project quickly:
Navigate to http://localhost:3000, you will see a page similar to this:
Benefits of using react-html-email
By using React to build our template, there are some benefits we gain from it:
- We can create components and reuse them easily.
- There is no friction between designing the UI of the application and the email template.
- Translation made easy. You just have to pick a react internationalization package, follow the instructions and you are all set. We use react-intl.
- While building, we can preview the template; thank HMR that comes out of the box with the CRA package.
- react-html-email brings components that abstract for you the tedious task of using nested table HTML tags.
- react-html-email components are compatible with the major email clients (Gmail, Yahoo, Apple Mail, Outlook, etc.)
Build the template with react-html-email
To start building the template, with need two things:
- Install the node package for react-html-email
- Install react-router to create a route that will render our template. It is helpful to see a preview of the template while building it.
Update the content of App.tsx with the code below:
The code above configures the routing in the application. We define a route called /signup that renders the component SignupWelcome, which is not been created yet. As you guess, the next step is to create this component and design our email template.
Build the template
Inside the folder email-builder/src, create a folder called templates then, create a file called SignupWelcome.tsx and add the code below:
Update the route declaration in App.tsx to provide the required properties: subject, userName, and confirmationUrl. You can give any value you want.
Run yarn start then, navigate to http://localhost:3000/signup we got the UI below:
Note: Since React v17, it is not required to import React in a component file.
Generate the HTML from the React component
As you may know, when sending an email, the body can be plain text or HTML. In our case, we need to send it as HTML.
The email template is ready. To generate the HTML version, we will use a function provided by the package.
Create a file in the project root named renderEmail.tsx and add the code below:
Create a file in the project root named generateSignupEmail.ts and add the code below:
Run the command below to see the result:
We got the following output in the terminal:
Configure the target email clients
In the previous picture, there are some warnings about styling on some mail clients. Display warning is another great feature provided by react-html-email. It is possible to define the mail clients you are targeting, and it will show the style issue your template could have on those clients. To configure it, do:
Above are all the values possible for email clients. Remove what you don’t need. You now have everything to build awesome email template without hassle.
Find the source code of this project on the GitHub repository.
