DEV Community

Cover image for Sending Calendar Invites with React and SMTP Express
Emore Ogheneyoma Lawrence
Emore Ogheneyoma Lawrence

Posted on

Sending Calendar Invites with React and SMTP Express

#react #email #tutorial #howto

Table of Contents

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: "alex.johnson@company.com", // 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="johnDoe@gmail.com" /> </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
Enter fullscreen mode Exit fullscreen mode

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:

Image description

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:

Image description

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.

Top comments (0)