Smart React Form

Minimal, beginner-friendly React form helper with SmartForm, validators, and reusable input components.
No need for useState, useEffect, or prop drilling for forms. Perfect for dashboards, registration forms, and form-heavy apps.

🌟 Features

• useSmartForm Hook: Manage form state, nested fields, validation, and reset easily.
• Validators (v): Built-in validators for numbers, integers, positive values, email, Bangladeshi phone, required, file size, oneOf, min/max length.
• Reusable Inputs:
  • FormInput – text, number, checkbox
  • FormFileInput – file input with reset support
  • FormSelect – dropdown with validation
• Nested Fields: Support for fields like address.city.
• File Reset Support: Automatically reset file inputs.
• Clear & Simple: Minimal boilerplate for React forms
• Error Summary: You can show error Summary top or bottom on the UI.

🛠 Installation

npm install smart-react-form

or

yarn add smart-react-form

Requires React >= 16.8

📦 Package Structure

react-smart-crud/
├── src/
│   ├── helpers.js          # getByPath & setByPath
│   ├── validators.js       # All built-in validation functions
│   ├── useSmartForm.js     # Main custom hook
│   ├── FormInput.jsx       # Text / number / checkbox input
│   ├── FormFileInput.jsx   # File input with reset
│   └── FormSelect.jsx      # Select dropdown input
├── index.js                # Single entry point exports
└── index.d.ts              # Type definitions

🎨 How SmartForm Works – Visual Flow

┌─────────────┐
│ User Types  │
└─────┬───────┘
      │ onChange
      ▼
┌─────────────┐
│ useSmartForm│
│ bind(name)  │
│ updates     │
│ values      │
└─────┬───────┘
      │ validate()
      ▼
┌─────────────┐
│ validators  │
│  v.required │
│  v.number   │
│  v.email    │
└─────┬───────┘
      │ errors?
      ▼
┌─────────────┐
│ FormInput   │
│ FormSelect  │
│ FormFile    │
└─────────────┘

⚡ Basic Usage – SmartForm Demo Form

import React from "react";
import { useSmartForm, FormInput, FormFileInput, FormSelect, v } from "react-smart-crud";

export default function RegisterForm() {
  const form = useSmartForm();

  const onSubmit = (data) => {
    console.log("Final Data:", data);
    form.reset(); // reset all fields after submission
  };

  return (
    <form onSubmit={form.submit(onSubmit)} className="space-y-4">
      {/* Name */}
      <FormInput
        form={form}
        name="name"
        placeholder="Full Name"
        validators={[v.required("Name is required"), v.minLen(5)]}
      />

      {/* Age */}
      <FormInput
        form={form}
        name="age"
        type="number"
        placeholder="Age"
        validators={[v.required(), v.number(), v.min(18)]}
      />

      {/* Role */}
      <FormSelect
        form={form}
        name="role"
        validators={[v.required()]}
      >
        <option value="">Select Role</option>
        <option value="admin">Admin</option>
        <option value="user">User</option>
      </FormSelect>

      {/* Phone */}
      <FormInput
        form={form}
        name="phone"
        placeholder="+8801XXXXXXXXX"
        validators={[v.required(), v.phoneBD()]}
      />

      {/* Avatar */}
      <FormFileInput
        form={form}
        name="avatar"
        validators={[v.fileSize(500)]} // Max 500kb
      />

      {/* Checkbox */}
      <FormInput
        form={form}
        name="agree"
        type="checkbox"
        label="I agree"
        validators={[v.required("You must agree")]}
      />

      <button type="submit">Register</button>
    </form>
  );
}

⚡ Error Summary

Display all form errors at once in a summary box.

Usage : (Top or Bottom on Form)

<ErrorSummary errors={form.errors} />

Props:

errors – object from useSmartForm, e.g. form.errors.

Example output:

Please fix errors:

• Name is required
• Age must be at least 18
• Invalid Bangladeshi phone number

Notes:

Automatically hides if there are no errors.

Works with individual field errors for better UX

📝 Validator Examples

| Validator | Usage Example | Notes | | ------------------- | ----------------------------- | ------------------------------- | | v.required() | v.required("Name required") | Works for string, boolean, file | | v.number() | v.number() | Checks for number | | v.integer() | v.integer() | Must be integer | | v.positive() | v.positive() | Number > 0 | | v.minLen(n) | v.minLen(5) | Minimum string length | | v.exactLen(n) | v.exactLen(11) | Exact length | | v.startsWith(str) | v.startsWith("+880") | Must start with string | | v.email() | v.email() | Valid email format | | v.phoneBD() | v.phoneBD() | Valid Bangladeshi phone | | v.oneOf([...]) | v.oneOf(["admin","user"]) | Must be one of the options | | v.fileSize(kb) | v.fileSize(500) | Max file size in KB |

✅ Features Recap & How to Implement

1. Form State Management

   const form = useSmartForm();
   form.bind("fieldName"); // bind to inputs

2. Validation

   validators={[v.required(), v.number()]}

3. Nested Fields

   <FormInput form={form} name="address.city" />

4. File Input with Reset

   <FormFileInput form={form} name="avatar" validators={[v.fileSize(500)]} />

5. Dropdown / Select

   <FormSelect form={form} name="role">
     <option value="admin">Admin</option>
   </FormSelect>

📌 Quick Tips

• Always wrap input fields with bind or use FormInput, FormFileInput, FormSelect.
• For files, reset automatically handled by SmartForm’s reset() or resetField(name).
• Nested objects supported using dot notation: address.city.