useSmartForm

🚀 A lightweight and powerful React Hook for handling forms with validation, file uploads, checkboxes, and more!

🌟 Features

• ✅ Instant & On-Submit Validation – Real-time field validation with error messages.
• ⚡ Debounce Validation – Prevents excessive validation calls while typing.
• 📂 File Upload Handling – Supports file size & type restrictions.
• 🔄 Form Reset with Default Values – Reset form easily while keeping initial values.
• 🔧 Optimized Performance with useReducer – Efficient state management.
• 🎯 Supports All Input Types – Works with text, email, password, checkbox, file, etc.

📦 Installation

npm install ease-validator@latest 

or

yarn add ease-validator@latest 

🚀 Usage Example

import React from "react";
import useSmartForm from "ease-validator";

const validationSchema = {
  name: { required: true, minLength: 3, errorMessage: { required: "Name is required!", minLength: "Name is too short!" } },
  email: { required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, errorMessage: { required: "Email is required!", pattern: "Invalid email format!" } },
  password: { required: true, minLength: 6, errorMessage: { required: "Password required!", minLength: "Password too short!" } },
  file: { required: true, maxSize: 2 * 1024 * 1024, allowedTypes: ["image/png", "image/jpeg"] },
  terms: { required: true, type: "checkbox" },
};

const MyForm = () => {
  const { register, handleSubmit, errors, resetForm, isSubmitting } = useSmartForm(validationSchema);

  const onSubmit = (data) => {
    console.log("Form Submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Name" />
      {errors.name && <p>{errors.name}</p>}

      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email}</p>}

      <input {...register("password")} type="password" placeholder="Password" />
      {errors.password && <p>{errors.password}</p>}

      <input {...register("file")} type="file" />
      {errors.file && <p>{errors.file}</p>}

      <input {...register("terms")} type="checkbox" /> Accept Terms
      {errors.terms && <p>{errors.terms}</p>}

      <button type="submit" disabled={isSubmitting}>Submit</button>
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
};

export default MyForm;

📖 API Reference

useSmartForm(validationSchema, initialValues)

Creates a form handler with validation and state management.

Parameters:

| Parameter | Type | Description | | ------------------ | ----------------- | ---------------------------------------- | | validationSchema | Object | Defines validation rules for each field. | | initialValues | Object (optional) | Default values for the form fields. |

register(name)

Returns input properties for controlled inputs.

Example:

<input {...register("email")} type="email" placeholder="Enter email" />

handleSubmit(callback)

Handles form submission.

Example:

<form onSubmit={handleSubmit((data) => console.log(data))}>
  <button type="submit">Submit</button>
</form>

resetForm()

Resets the form to its initial state.

Example:

<button type="button" onClick={resetForm}>Reset Form</button>

isSubmitting

Returns true if the form is being submitted.

Example:

<button type="submit" disabled={isSubmitting}>Submit</button>

📜 Validation Rules

You can pass validation rules as an object with these properties:

| Rule | Type | Description | | -------------- | ------- | -------------------------------------- | | required | Boolean | Marks the field as required. | | minLength | Number | Minimum number of characters required. | | pattern | RegExp | Regular expression for validation. | | maxSize | Number | Maximum file size (for file inputs). | | allowedTypes | Array | Allowed file MIME types. | | errorMessage | Object | Custom error messages. |

⭐ Why useSmartForm?

✔ Easy to Use – No complex setup needed. ✔ Performance Optimized – Uses useReducer for better state handling. ✔ Customizable – Allows custom validation messages. ✔ Supports All Input Types – Works with text, email, password, file, checkbox, etc. ✔ Lightweight – Minimal bundle size.

📄 License

MIT License