How to send Client-side Email in React JS

Most emails are sent using server-side api. In this article I am going to show you how to send an Email in React JS using EmailJS platform. We will be sending email using Gmail.

Go to https://emailjs.com and create account. After creating an account. Login to your Dashboard.

Click Add New Service

Click on Gmail

1. Set the name of the service to anything of choice.
2. Leave your Service ID on change
3. Click on Connect Account. You will be made to connect EmailJS to your Gmail Account.
4. After Successful Connection, click on Create Service

Now go to Email Templates in the SideBar Menu.

Now click Create New Template. Do the settings in the email templates and please note the tags like message and from_name.

Go to your React JS application and and install email js Dependency

npm i emailjs-com

Then add this code:

import emailjs from 'emailjs-com';
const templateParams = {
from_name: 'James',
message: 'Check this out!'
};
emailjs.send('<YOUR SERVICE ID>','<YOUR TEMPLATE ID>', templateParams, '<YOUR USER ID>')
.then((response) => {
console.log('SUCCESS!', response.status, response.text);
}, (err) => {
console.log('FAILED...', err);
});

import the emailjs in your add.

Add the parameters and test. You should be receiving emails now.

Thank you for reading.