Hi coders 👋,
I recently built my own form validation library for React instead of using heavy libraries. I wanted something lightweight, flexible, and easy to control — so I decided to build it from scratch.
Why Not Use Existing Libraries?
While working with forms in React, I explored popular solutions. They are powerful, but I faced a few issues:
Too much boilerplate
Large bundle size
Complex configuration for simple forms
Limited flexibility for custom validation logic
**
Install first package 📦 from npm
**
npm install codpro-validator
Uses
const {
values,
errors,
handleChange,
handleSubmit,
isDirty,
isSubmitting
} = useValidator({
name:{
rules:[min(6,message)],
disabled: true // false
},{mode:"onChange"} //while typinge check err // onSubmit, onBlur when leave the input box
});
register
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} placeholder="Email" />
{errors.email && <p>{errors.email}</p>}
<input type="password" {...register("password")} placeholder="Password" />
{errors.password && <p>{errors.password}</p>}
<input type="password" {...register("confirmPassword")} placeholder="Confirm Password" />
{errors.confirmPassword && <p>{errors.confirmPassword}</p>}
<button disabled={!isDirty || isSubmitting}>
{isSubmitting ? "Submitting..." : "Submit"}
</button>
</form>
Note:
Suppose if you want to define initial value you can use defaultValue? Of react attribute.
Lightweight library, easy to read, easy to write ✍️, performance better, high security checking,
Must define mode:?
Top comments (0)