https://github.com/aiaaee/sending_email_react

User panel for sending email to Admin
https://github.com/aiaaee/sending_email_react

bootstrap5 component emailjs-com flex javascript jsx react react-hooks react-router reactcomponents reactjs reactlibrary

Last synced: about 1 month ago
JSON representation

User panel for sending email to Admin

• Host: GitHub
• URL: https://github.com/aiaaee/sending_email_react
• Owner: aiaaee
• License: mit
• Created: 2024-07-20T16:28:40.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T19:11:18.000Z (3 months ago)
• Last Synced: 2024-11-05T18:29:06.738Z (3 months ago)
• Topics: bootstrap5, component, emailjs-com, flex, javascript, jsx, react, react-hooks, react-router, reactcomponents, reactjs, reactlibrary
• Language: JavaScript
• Homepage:
• Size: 242 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sending Email Message by React

## Using [EmailJs](https://www.emailjs.com/) is one of the most important decision of project 

In this project, we aim to send a message to the user's email using the emailJs tool.

At the beginning of the project, we design our form in the Request section. 

##### The entire design of this form is handled by Bootstrap.

By using rows and segmenting sections of the page with columns, we create a fully responsive page.

![Requests](https://github.com/user-attachments/assets/f245725c-f882-4d17-98db-d4f4deba583a)

After completing the JSX part of the project, we proceed to send the messages generated through the form.

Using the [npm](https://www.npmjs.com/) website, we download the npm-com package.

Then, we complete its code using the documentation provided in the send-form section.

The syntax provided by the emailJs documentation is as follows:

```

emailjs.sendForm(serviceID, templateID, templateParams, options);

```

It should be noted that in the `templateParams` section, we can use a function we created to access the _target_ and place them in this section.

Then, using [ReactToastify](https://www.npmjs.com/package/react-toastify) in the then section, we specify that if the sending status is successful, it should send us a success message.

If it fails to properly recognize the email, it should send us an error message.

#### Installation 

```

npm i react-toastify

```

#### imports 

```

import {ToastContainer , toast} from 'react-toastify'

import 'react-toastify/dist/ReactToastify.css';

```

![Requests3](https://github.com/user-attachments/assets/a081197b-0a44-4e5f-905d-fdcc9a2c6d12)

Finally, if we check our email, we will see that it has been successfully sent.

![Requests2](https://github.com/user-attachments/assets/44a69b0b-6c12-4791-9a6d-73fc32ade47f)

The written codes can be viewed in the [source](https://github.com/aiaaee/Sending_Email_React/tree/main/Authentication/src) section.