Sending Emails from the Browser with EmailJS in Your React App: No Backend Required!

In today's web development landscape, there are numerous ways to handle email communication directly from the client-side without needing a server. One such method is by using EmailJS, a service that allows you to send emails directly from the browser. This blog post will guide you through the process of setting up and using EmailJS to send emails from a React application.

What is EmailJs?
EmailJS is a service that allows you to send emails directly from your client-side JavaScript code without the need for server-side code. With EmailJS, you can choose from various email services, create templates, and add attachments, parameters, and captcha. It’s a hassle-free solution for incorporating email functionality into your web applications

Setting Up EmailJs.

Step 1: Create an EmailJS Account
First, go to EmailJS and sign up for a free account. Once you're signed up, you'll need to set up an email service.

Step 2: Add an Email Service
1. Navigate to the Email Services section in the EmailJS dashboard.
2. Add and configure your preferred email service (e.g., Gmail, Outlook).

Step 3: Create an Email Template
1. Go to the Email Templates section.
2. Create a new template that will be used for sending emails. Customize it according to your needs.

Step 4: Obtain Your User ID, Service ID, and Template ID
These IDs are required to configure EmailJS in your application:

• User ID: Found in the EmailJS dashboard.

• Service ID: The ID of the email service you configured.

• Template ID: The ID of the email template you created.

Integrating EmailJS in Your React Application
Step 1: Install EmailJS SDK
First, install the EmailJS SDK in your React project:

npm install @emailjs/browser

Step 2: Create a Contact Form Component
Create a Contact component with a simple form to collect user input.

import React, { useRef, useState } from "react";
import emailjs from "@emailjs/browser";

const Contact = () => {
  const formRef = useRef(null);
  const [loading, setLoading] = useState(false);
  const [userInput, setUserInput] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });

  const sendEmail = (e) => {
    {/* Method to handle the email send */}
  };

  const handleChange = (e) => {
    setUserInput({ ...userInput, [e.target.name]: e.target.value });
  };

  return (
    <form ref={formRef} onSubmit={sendEmail}>
      <div>
        <label>Name</label>
        <input type="text" name="name" value={userInput.name} onChange={handleChange} required />
      </div>
      <div>
        <label>Email</label>
        <input type="email" name="email" value={userInput.email} onChange={handleChange} required />
      </div>
      <div>
        <label>Subject</label>
        <input type="text" name="subject" value={userInput.subject} onChange={handleChange} required />
      </div>
      <div>
        <label>Message</label>
        <textarea name="message" value={userInput.message} onChange={handleChange} required />
      </div>
      <button type="submit" disabled={loading}>{loading ? "Sending..." : "Send"}</button>
    </form>
  );
};

export default Contact;

This is how sendEmail should look like:

  const sendEmail = (e) => {
    e.preventDefault();
    setLoading(true);
     emailjs
        .sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', formRef.current, {
        publicKey: 'YOUR_PUBLIC_KEY',
      })
      .then(
        () => {
           alert("Message sent successfully!");
            setUserInput({ name: "", email: "", subject: "", message: "" });
        },
        (error) => {
          alert("Failed to send message, please try again.");
        })
        .finally(() => {
        setLoading(false);
      });
}

Step 3: Add Your Contact Component to Your Application
Include your Contact component in your application where you want the form to appear.

import React from 'react';
import Contact from './Contact';

const App = () => {
  return (
    <div>
      <h1>Contact Us</h1>
      <Contact />
    </div>
  );
};

export default App;

Conclusion
Using EmailJS to send emails directly from the browser simplifies the process of setting up email functionality in your web applications. By following the steps outlined in this blog post, you can easily integrate email sending capabilities into your React projects without needing a backend server. Happy coding!