DEV Community

Cover image for Integrating EmailJs with ReactJs
ektaarora3501
ektaarora3501

Posted on

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.

Alt Text
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

id

  • 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

Top comments (2)

Collapse
 
thewizardofwikacy profile image
Info Comment hidden by post author - thread only accessible via permalink
The Wizard of Wikacy

very rushed and incomplete.

Collapse
 
naveenkolambage profile image
Naveen Dinushka

Hey Mate this is not working anymore

Some comments have been hidden by the post's author - find out more