codpro-validator

🚀 A lightweight, powerful and flexible React validation hook.

Built for developers who want full control without heavy form libraries.

✨ Features

• Lightweight & zero external dependencies
• Custom validation rules
• Cross-field validation (match passwords)
• Multiple validation modes
  • onSubmit
  • onBlur
  • onChange
• isDirty tracking
• touchedFields tracking
• isSubmitting state
• isValid state
• reset() support
• Async submit support
• Fully extensible
• TypeScript friendly

📦 Installation

npm install codpro-validator

or

yarn add codpro-validator

🚀 Basic Usage

import {
  useValidator,
  required,
  email,
  min,
  match
} from "codpro-validator"

function RegisterForm() {
  const {
    register,
    handleSubmit,
    errors,
    isDirty,
    isSubmitting,
    isValid,
    touchedFields,
    reset
  } = useValidator(
    {
      email: {
        rules: [required(), email()]
      },
      password: {
        rules: [required(), min(6)]
      },
      confirmPassword: {
        rules: [
          required(),
          match("password", "Passwords must match")
        ]
      }
    },
    { mode: "onSubmit" }
  )

  const onSubmit = async (data) => {
    await new Promise((r) => setTimeout(r, 1000))
    console.log(data)
    reset()
  }

  return (
    <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>
  )
}

🧠 Validation Modes

onSubmit (Default)

Validation runs when form is submitted.

useValidator(schema, { mode: "onSubmit" })

onBlur

Validation runs when input loses focus.

useValidator(schema, { mode: "onBlur" })

onChange

Validation runs on every keystroke.

useValidator(schema, { mode: "onChange" })

📘 API

useValidator(schema, options)

Parameters

| Name | Type | Description | |---------|--------|------------| | schema | object | Validation schema | | options | object | Config options |

Returned Properties

| Property | Description | |----------------|------------| | register | Connect input field | | handleSubmit | Wrap submit handler | | errors | Validation errors | | isDirty | True if any field changed | | isSubmitting | True during submit | | touchedFields | Tracks touched inputs | | isValid | True if no errors | | reset | Reset form |

🛠 Built-in Validators

required(message?)

required("This field is required")

email(message?)

email("Invalid email address")

min(length, message?)

min(6, "Minimum 6 characters required")

max(length, message?)

max(20, "Maximum 20 characters allowed")

match(fieldName, message?)

match("password", "Passwords must match")

🔁 Reset Form

reset()

Resets form back to initial values.

🧩 Example Project Structure

src/
 ├── guards/
 │    ├── required.js
 │    ├── email.js
 │    ├── min.js
 │    ├── max.js
 │    └── match.js
 │
 ├── hooks/
 │    └── useValidator.js
 │
 └── index.js

🔥 Why codpro-validator?

• Smaller than heavy form libraries
• Easy to understand
• Fully customizable
• Great for learning & production
• Clean API design

🗺 Roadmap

• Async validation rules
• Debounced validation
• Nested object validation
• Field arrays support
• DevTools integration

🏷 Keywords

react validation hook, react form validation, lightweight form library, custom validation, react validator hook, form state management

📄 License

MIT © CodPro Sui

⭐ Support

If you like this project:

• Star the repository
• Share it with developers
• Contribute improvements

Built with ❤️ by CodPro Sui