DEV Community

Cover image for Send email using reactjs
Rajamanickam
Rajamanickam

Posted on

Send email using reactjs

Create a React.js application using either Create React App or by setting up a React project manually.

Install the emailjs-com package by running the following command in the terminal:

npm install emailjs-com

Import the emailjs-com package in your React component where you want to send the email:

Image description

Initialize Email.js by providing your Email.js user ID. This ID can be obtained by creating a free account on the Email.js website.

Emailjs.com

A quick and simple way to get a good understanding of EmailJS is to follow our "Contact Form" tutorial that covers all the fundamentals of EmailJS.

Create a function in your component to send the email. The function should use the send method provided by the emailjs-com package and pass the necessary parameters such as the service ID, template ID, template parameters, and callback function.

Image description

Now we can implement Regex Form validation.

To add regular expression (regex) validation to your email sending form in React, you can use JavaScript's built-in RegExp object to match the input data against a pattern.

If the input data does not match the pattern, you can display an error message to the user. Here's an example:

Image description

For Validation:

Image description

Emailjs Dashboard:
Image description

Email message:

Image description

Source will be available on : https://github.com/erajamanickam/how-to-sent-email-in-reactjs-using-emailjs

Live demo : https://how-to-sent-email-in-reactjs.vercel.app/

Watch on video : https://youtu.be/W4JUdgR8a0E

Top comments (0)