Send Emails using ReactJS from EmailJS
Yes, you read it right ! Finally a functionality that lets you send email from your ReactJS based frontend to your mail address (without popping up the inbuilt mail functionality).
Let’s head on to the solution without discussing the issue any further.
Go to https://www.emailjs.com/
We need to sign up here and set up some backend for the code to workout otherwise how will it know where to send the mail to ? 🤔
After you have successfully signed in, this is how it will look like:
Go to Add New Service button,
I am going to choose Gmail since it is popular and almost everybody uses it and its the only one I have tested. So, lets choose this service.
After this, click on Connect Account, a pop up appears through which you can link your available Gmail account.
Give it the access to send emails on your behalf. And click Continue. After you have successfully connected to your Gmail account, you can see it below your Service ID, like this:
After this click on Create Service. You’ll see something like this:
Now we need to create a new email template, a layout in which we would like to receive a mail.
Go to Email Template, click on Create New Template, now you can edit this default layout or same it that way. If the email-template is to your liking, then you can save it.
This is the layout I have edited for myself:
This is how it looks like
Another stage completed ! Let’s now head on to the ReactJS part of it.
We are here at the ‘coding’ part of it.
We need to install the emailjs package in our code by
npm install emailjs-com — saveGreat, after this is done, lets add the correct code snippets. Go to https://www.emailjs.com/docs/examples/reactjs/
Here you can see the code. There’s a function sendEmail() which can be easily implemented on a button click or on form submit. So, lets do that. You can copy the exact and paste it wherever you require it. Don’t forget to include the import statement.
Here’s how you can use the code:
This is how my form looks like:
Service ID to be replaced by your own Service ID, the same can be found in the above screenshots incase you are unable to find them.
Template ID to be replaced by your own Template ID, under Email Templates and choosing the template id of your current template.
User ID can be replaced by your own User ID, it can be found under Integration tab -> under API tab -> User ID.
Now, let’s test it !!
This is the message I want to send
And This is the mail I received directly in my INBOX
If you were able to reach until here and successfully implemented it, CONGRATULATIONS 🥳
