usemailprex-react
v1.0.5
Published
Send Emails from your Website with Ease
Downloads
11
Maintainers
Readme
useMailprex
useMailprex
is a React hook for handling contact forms and sending data to a server using fetch. This hook simplifies managing the form state and server response.
What is Mailprex?
Mailprex is a service designed to facilitate sending emails from web forms. It handles the backend processes, allowing you to focus on creating and managing your forms without worrying about the complexities of email delivery.
Installation
First, install the package using npm:
npm install usemailprex-react
Usage
- Register in
https://mailprex.top/
, Confirm your account - Login in
https://mailprex.top/
, Get a formToken in dashboard - Install the hook in your project and Enjoy
Here is an example of how to use useMailprex in a contact form component in a react.js application.
"use client";
import React from "react";
import { useMailprex } from "usemailprex-react";
const ContactForm = () => {
const webName = "Mailprex Test";
const emailDestiny = "[email protected]";
const url = "https://api.mailprex.top/email/send";
const formToken = "your-form-token";
const { formData, handleChange, handleSubmit, response } = useMailprex({
url,
webName,
emailDestiny,
formToken,
});
const handleFormSubmit = async (e) => {
e.preventDefault();
await handleSubmit(e);
if (response.error) {
alert(
"Error sending message. Try again later.",
);
} else {
alert(
"Message sent succesfully!"
);
}
};
return (
<form
onSubmit={handleFormSubmit}
className="max-w-lg mx-auto p-4 bg-white shadow-md rounded-lg"
>
<div className="mb-4">
<label
htmlFor="fullname"
className="block text-gray-700 font-semibold mb-2"
>
Full Name *
</label>
<input
type="text"
id="fullname"
name="fullname"
value={formData.fullname}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
placeholder="Full name"
required
/>
</div>
<div className="mb-4">
<label
htmlFor="email"
className="block text-gray-700 font-semibold mb-2"
>
Email *
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
placeholder="Email"
required
/>
</div>
<div className="mb-4">
<label
htmlFor="phone"
className="block text-gray-700 font-semibold mb-2"
>
Phone
</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
placeholder="Phone"
/>
</div>
<div className="mb-4">
<label
htmlFor="service"
className="block text-gray-700 font-semibold mb-2"
>
Service
</label>
<input
type="text"
id="service"
name="service"
value={formData.service}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
placeholder="Service"
/>
</div>
<div className="mb-4">
<label
htmlFor="message"
className="block text-gray-700 font-semibold mb-2"
>
Message *
</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring focus:border-blue-300"
rows={4}
placeholder="Message"
required
></textarea>
</div>
<div className="text-center">
<button
type="submit"
className="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded-md transition-colors duration-300"
>
Send Message
</button>
</div>
{response.loading && (
<p className="mt-4 text-blue-500">Sending email...</p>
)}
{response.error && (
<p className="mt-4 text-red-500">
Error sending email: {response.error.message}
</p>
)}
{response.data && (
<p className="mt-4 text-green-500">{response.data.message}</p>
)}
</form>
);
};
export default ContactForm;
Example Email
Here is an example of how the emails sent through Mailprex will appear when they arrive at the specified email address:
API
useMailprex
Parameters
- url: The server URL to send the form data to.
- webName: The name of the website from which the form is being submitted.
- emailDestiny: The destination email address.
- formToken: The form token for authentication.
Returns
- formData: An object containing the form data.
- handleChange: A function to handle changes in the form fields.
- handleSubmit: A function to handle form submission.
- response: An object containing data, loading, and error regarding the API response.
Contributing
Contributions are welcome. Please open an issue or a pull request for any improvements or fixes.