Integrating EmailJs with ReactJs

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

Comments

[The Wizard of Wikacy]

very rushed and incomplete.

[Naveen Dinushka]

Hey Mate this is not working anymore