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)