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
The code above does the following:
-
State Management: Uses
useStatefor 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.
Top comments (0)