useform-simple-hook
v1.1.3
Published
Easy hook for react to handle form states.
Downloads
39
Maintainers
Readme
useForm Simple Hook (React)
Easy hook for react to control forms states.
Created by @luislealdev.
Install
With npm
npm install useform-simple-hook
or yarn
yarn add useform-simple-hook
Example
Outside your component declare fields and initial values.
const formData = {
name: "",
message: "",
email: "",
};
interface formData {
name?: string;
message?: string;
email?: string;
}
On your component call the hook and desestructure your data:
const { formState, onInputChange, onResetForm } = useForm(formData);
const { name, message, email }: formData = formState;
On your form use it:
<input
required
name="name"
value={name}
onChange={onInputChange}
type="text"
placeholder="Name"
/>
<textarea
name="message"
value={message}
onChange={onInputChange}
className="white-text f-size-16 p-10"
placeholder="Message"
></textarea>
Real life example:
Also this example is using leal-styles.css.
import { useForm } from "useform-simple-hook";
import { send } from "emailjs-com";
import Swal from "sweetalert2";
const formData = {
name: "",
phone: "",
mail: "",
};
interface formData {
name?: string;
phone?: string;
mail?: string;
}
export const ContactForm = () => {
const { formState, onInputChange, onResetForm } = useForm(formData);
const { name, phone, mail }: formData = formState;
const onSubmit = (e: { preventDefault: () => void }) => {
e.preventDefault();
send("###", "######", formState, "##############")
.then((response) => {
Swal.fire(
"Message sent!",
"We'll see you soon.",
"success"
);
onResetForm();
})
.catch((err) => {
Swal.fire({
icon: "error",
title: "Oops...",
text: "Something went wrong!",
footer: "Try again later",
});
});
};
return (
<section id="contactForm" className="flex column center-h align-center">
<div>
<h3 className="purple-text-bg f-size-50">Contact Us</h3>
<div className="flex align-center">
<hr />
<p className="f-size-24" style={{ color: "#5041DB" }}>
¡Let's start our history!
</p>
</div>
</div>
<br />
<div className="flex center-h width-40">
<form
action="/"
method="POST"
onSubmit={onSubmit}
className="m-10 flex column align-center pb-50 width-100"
>
<div className="width-100">
<p className="f-size-24">Full Name</p>
<input
type="text"
className="input width-100"
placeholder="Full Name"
required
name="name"
value={name}
onChange={onInputChange}
/>
</div>
<div className="width-100">
<p className="f-size-24">Phone</p>
<input
type="tel"
className="input width-100"
placeholder="Phone"
required
name="Phone"
value={Phone}
onChange={onInputChange}
pattern="[1-9]{1}[0-9]{9}"
/>
</div>
<div className="width-100">
<p className="f-size-24">Email</p>
<input
type="email"
className="input width-100"
placeholder="[email protected]"
required
name="mail"
value={mail}
onChange={onInputChange}
/>
</div>
<button className="call-to-action white-text mt-50 f-size-24">
SEND
</button>
</form>
</div>
</section>
);
};