Sending Calendar Invites with React and SMTP Express

Table of Contents

• Introduction
• Sending Calendar Invites functionality
• Conclusion

Introduction

Our previous article explored how to leverage SMTP Express to send basic emails directly from your React application. Now let's step it up a little bit by learning how to send Calander Invites
Please check out the first article on this as it will provide you with the basic things you need to set up and get started with SMTP and integrating it into your React. Check it out here

Sending Calendar Invites Functionality

Building upon the setup from the first path of this article, let's dive straight into the code for sending calendar invites!

import { useState } from "react";
import { smtpexpressClient } from "../../services/smtp";

const CalendarInvite = () => {
  const [loading, setLoading] = useState(false)
  const [eventTitle, setEventTitle] = useState("");
  const [email, setEmail] = useState("")
  const [startDateInvite, setStartDateInvite] = useState("")
  const [endDateInvite, setEndDateInvite] = useState("")
  const [location, setLocation] = useState("")
  const [url, setUrl] = useState("")
  const [meetingLocation, setMeetingLocation] = useState("")
  const [description, setDescription] = useState("")

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    setLoading(true);    

    try {
      await smtpexpressClient.sendApi.sendMail({
        subject: "Calender Invite",
        message: "Please find the attached calendar invite.",
        sender: {
          email: import.meta.env.VITE_SMTP_PROJECT_SENDER_EMAIL,
          name: "Alex Johnson", // Full name of the sender for personalization
        },
        recipients: {
          email: email, 
          // name: "John Doe", // name of the recipient for personalization
        },
        calendarEvent: {
          title: eventTitle,
          startDate: new Date(startDateInvite),
          endDate: new Date(endDateInvite),
          organizer: "[e-mail]", //  use the email of the event organizer
          location: location === "remote" ? url : meetingLocation,
          url: url, // meeting link
          description: description,
        },
      });

      // Notify user of successful submission
      alert("Please check your email to view the sent message");
      setLoading(false)

      // clear your form fields.
    } catch (error) {
      console.log(error);
      alert("Oops! Something went wrong. Please try again later.");
      setLoading(false)
    } finally{
      setLoading(false);
    }
  }

  return (
    <div className="app">
      <h2 className="" title="documents, images and more">
        Calander Invite Email Form
      </h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="emailInput">Email:</label> <br />
          <input
            id="emailInput"
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="[e-mail]"
          />
        </div>

        <div>
          <label>Title</label>
          <input
            type="text"
            required
            value={eventTitle}
            onChange={(e) => setEventTitle(e.target.value)}
            placeholder="Event Title"
          />
        </div>

        <div>
          <label>Description</label>
          <input
            type="text"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Event Description"
          />
        </div>

        <div>
          <label>Date and Start Time</label> <br />
          <input
            required
            type="datetime-local"
            value={startDateInvite}
            onChange={(e) => setStartDateInvite(e.target.value)}
          />
        </div>

        <div>
          <label>Date and End Time</label>
          <input
            required
            type="datetime-local"
            value={endDateInvite}
            onChange={(e) => setEndDateInvite(e.target.value)}
          />
        </div>

        <div>
          <label>Location</label>
          <select
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            required
          >
            <option value=""></option>
            <option value="remote">Remote</option>
            <option value="physical">Physical</option>
          </select>
        </div>

        {location === "remote" && (
          <div>
            <label>URL Link</label>
            <input
              required
              type="url"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="Meeting Link"
            />
          </div>
        )}

        {location === "physical" && (
          <div>
            <label>Enter Location</label>
            <input
              required
              type="text"
              value={meetingLocation}
              onChange={(e) => setMeetingLocation(e.target.value)}
              placeholder="Meeting Location address"
            />
          </div>
        )}

        <button>{loading ? "Loading..." : "Send Calender Invite 🚀"}</button>
      </form>
    </div>
  );
}

export default CalendarInvite

The code above does the following:

• State Management: Uses useState for form inputs and loading state.
• Form Submission: handleSubmit() function prevents default, sets loading, sends email, and handles success/failure alerts.
• Renders Form: includes input fields for email, event title, dates, location, URL (if remote), meeting location (if physical), and description.
• Conditional Rendering: Shows URL if remote, meeting location if physical.
• Submit Button: Displays "Loading..." during form submission.

Here is the User Interface layout with pre-filled details:

On clicking the Send Email button, you should get an alert saying Please check your email to view the sent message. You would see this if you correctly configured the project.

We then get the Calendar invite in our mail, here's proof of it below:

Conclusion

We've seen how we can send Calendar invites using SMTP Express in our React JS application. Thank you for reading up to this point. Try to share this with your peers who may also benefit from its insights.

You can check the codebase here

What are your thoughts on Sending Calendar Invites with React and SMTP Express? Feel free to share your thoughts in the comments section below.