Integrating EmailJs with ReactJs

ektaarora3501 — Sun, 12 Jul 2020 13:50:29 +0000

Almost all the web applications we create, we need to send emails to users, whether it be a support email or verification one. In the below article we will go through all the steps of sending emails directly with ReactJs.
All we need is a basic knowledge of React and EmailJs account.

So developers fasten up your seat belt! Here we go !! 🚀

1. Creating EmailJs account

Click on the link and create a free account on EmailJs
Select the service you want to start with. I am using Gmail Service.
Connect your account and click on add service.
You will see Gmail service in added services .

2. Creating mail template

In your EmailJs dashboard click on Email Templates -> Create New template. Setup your template name and id.
You can configure the template as per your requirement.
You can use curly braces for the fields that will receive data from react code as shown below. I have made "To email" field dynamic.

Woo! Our template is set 🎉

3. Time for some code .. 😎

Create a new React App
Install the EmailJs package using command $ npm install emailjs-com --save
Import Email js in your App.js file import * as emailjs from "emailjs-com";
Grab the service Id and template id from your template-> Copy Code

Copy your user id from Account-> API Keys -> User ID
Modify your App.js file

Create the handleChange function

And you are done!!!
Woo! now you can send emails directly from react . 🎉

You can find the complete code on my github repository React-Emailjs

Forem: ektaarora3501

Integrating EmailJs with ReactJs