Using Email.js in React App

While I was working on making my portfolio site I wanted to be able to receive emails, since I was adding a ‘Contact’ section but wasn’t sure how to. I was using React.js to create my portfolio site and I googled around ways to send emails with React and I found Email.Js and it seemed like a perfect choice!

Email.js is a free platform that enables emails to be sent directly with JavaScript, not requiring a backend server. Email.Js has great documentation and it was very simple to use. This will be simple tutorial on how to use it !

Creating Our contact application

Here I will be creating a small react application that will contain a contact form. Before we can start using Email.js we must first create an account with them(which is also free!). After creating the account we are now given a unique UserId and an access token. We are also given a limit of 200 emails per month.

After creating our account lets go ahead and finish setting up our profile. First we must choose an email service that we will be using to receive emails , I use gmail but you can choose any of the available option that they have.

After choosing our provider we can now choose the Name and ID of the service provider, Which we will be using when creating our form in React.
After this step we will continue and choose our email template. EmailJS by default gives you a basic email template. These templates can be created in your dashboard as well.

Building your templates are very easy. Any variables you pass in must be wrapped in {{}}. Otherwise the information will not be passed correctly.

We can format your email however you want.

once your done choosing your template we are now set and can continue making our application!

Ok! now that we have successfully made an account with them and finished our template lets create our react app

npx create-react-app my-email

now lets cd into our application and open it. When using React, we are able to either install EmailJS with the npm command below.

$ npm install emailjs-com --save

using Bower
$ bower install emailjs-com --save

Or, we can manually embed the EmailJS CDN directly into your index.html like this:

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js">
</script>
<script type="text/javascript">
   (function(){
      emailjs.init("YOUR_USER_ID");
   })();
</script>

We can create our Contact.js file and for this part you will need the email template ID and service id you created .

import React, { Component } from 'react'
class ContactForm extends Component {
state = {
name: '',
email: '',
feedback: '',
}
handleSubmit= (e)=>{
e.preventDefault();
const templateId = "template_OSnwlhmv";;
this.setState({name:'',feedback:'',email:''})
this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
console.log('sent')
}
handleChange=(event) =>{
const{name,value}=event.target
this.setState({[name]:value})
}
sendFeedback= (templateId, variables) =>{
window.emailjs.send(
'gmail', templateId,
variables
).then(res => {
console.log('Email successfully sent!')
})
.catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
}
resetForm() {
this.setState({
name: '',
email: '',
subject: '',
message: '',
})
}
handleChange=(event) =>{
const{name,value}=event.target
this.setState({[name]:value})
}
render() {
return (
<>
<form onSubmit={this.handleSubmit}>
<h2 className="title3">Contact</h2><br></br>
<div className="form-group">
<input
required
onChange={this.handleChange}
value={this.state.name}
name='name'
type="name"
className="form-control"
id="exampleFormControlInput1"
placeholder="Name"
/>
</div>
<div className="form-group">
<input
required
onChange={this.handleChange}
value={this.state.email}
name='email'
type="email"
className="form-control"
id="exampleFormControlInput1"
placeholder="Email@example.com"
/>
</div>
<div className="form-group">
<textarea
placeholder='Message...'
name='feedback'
className="form-control message"
id="exampleFormControlTextarea1"
rows="3"
onChange={this.handleChange}
value={this.state.feedback}
required
/>
</div>
<button className="btn btn--submit"  >Send</button>
</form>
</>
)
}
}
export default ContactForm

this is our contact form and we have now finished this tutorial we can now test it and….

it works!!! Email.js is super simple to use you can check out their documentation https://www.emailjs.com/docs/