Easy Form Handler

A powerful, lightweight React form handling library with built-in validation, customizable styling, and intuitive components.

Features

✅ Simple API - Intuitive component-based form handling
✅ Built-in Validation - Comprehensive validation rules out of the box
✅ Custom Validation - Create your own validation functions
✅ Real-time Error Handling - Display errors as users type
✅ TypeScript Support - Full type safety
✅ Customizable Styling - Use default styles or create your own
✅ Accessibility - Built with a11y in mind
✅ Small Footprint - Lightweight with minimal dependencies

Installation

npm install easy-form-handler
# or
yarn add easy-form-handler

Basic Usage

import { Form, Heading, Input, Password, Submit, validate } from "easy-form-handler";
import { useState } from "react";

const MyForm = () => {
  // State to store form values
  const [record, setRecord] = useState({
    name: "",
    email: "",
    password: "",
  });

  // State to store validation errors
  const [error, setError] = useState({
    name: "",
    email: "",
    password: "",
  });

  // Form submission handler
  const handleSubmit = async (data: object) => {
    
    if (Object.keys(error).length === 0) {
      // Process form submission
      console.log("Form submitted", data);
    }
  };

  return (
    <Form onSubmit={handleSubmit} isActiveDefaultStyle={true}>
      <Heading>Signup Form</Heading>
      
      <Input 
        name="name" 
        type="text" 
        label="Name" 
        watch={setRecord} 
        rule={{
          required: true,
          max: 10,
          string: true,
        }} 
        error={error.name} 
        required 
        placeholder="Enter your name" 
      />
      
      <Input 
        name="email" 
        type="text" 
        label="Email" 
        watch={setRecord} 
        error={error.email} 
        required 
        placeholder="Enter your email" 
        rule={{
          required: true,
          email: true,
          contains: ["gmail", "yahoo"]
        }} 
        checkRuleOnBlur={true} 
      />
      
      <Password 
        name="password" 
        type="password" 
        label="Password" 
        watch={setRecord} 
        error={error.password} 
        required 
        placeholder="Enter your password" 
        checkRuleOnBlur={true} 
        autoComplete="new-password" 
        rule={{
          required: true,
          min: 8,
          max: 20,
          contains: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "!", "@", "#"],
        }}
      />
      
      <Submit value="Sign Up" />
    </Form>
  );
};

Components

Form

Container component for all form elements

<Form 
  onSubmit={handleSubmit}
  isActiveDefaultStyle={true}
  className="my-custom-form"
>
  {/* Form content */}
</Form>

Input

Text input with validation and error handling

<Input 
  name="email"
  type="text"
  label="Email Address"
  watch={setRecord}
  error={error.email}
  required
  placeholder="Enter your email"
  rule={{
    required: true,
    email: true
  }}
  checkRuleOnBlur={true}
/>

Password

Password input with toggle visibility

<Password 
  name="password"
  type="password"
  label="Password"
  watch={setRecord}
  error={error.password}
  required
  placeholder="Enter your password"
  rule={{
    required: true,
    min: 8,
    max: 20
  }}
/>

Heading

Form heading with default styling

<Heading>Registration Form</Heading>

Submit

Submit button with default styling

<Submit value="Register" />

Validation

Built-in Validation Rules

Easy Form Handler provides extensive validation rules:

Presence Rules

• required - Field must be present and not empty
• required_if - Field must be present when another field has a specific value
• required_with - Field must be present when any of the specified fields are present
• required_without - Field must be present when any of the specified fields are missing

String Rules

• string - Field must be a string
• isAlpha - Field must contain only alphabetic characters
• noSpecialChars - Field must not contain special characters

Size Rules

• min - Minimum length or value
• max - Maximum length or value
• between - Value must be between specified min and max
• size - Exact length or value

Type Rules

• numeric - Field must be a number
• integer - Field must be an integer
• boolean - Field must be true/false or 0/1
• array - Field must be an array
• date - Field must be a valid date
• file - Field must be a valid file path
• image - Field must be a valid image file

Format Rules

• email - Field must be a valid email address
• url - Field must be a valid URL
• uuid - Field must be a valid UUID
• ip - Field must be a valid IP address
• json - Field must be valid JSON
• regex - Field must match the specified regex
• contains - Field must contain specified strings
• in - Field must be one of specified values
• same - Field must match another field
• different - Field must be different from another field

Styling

Easy Form Handler provides default styling that can be enabled/disabled with the isActiveDefaultStyle prop. You can easily apply custom styling by providing additional CSS classNames to any component.

Typescript Support

All components are fully typed for maximum type safety.

interface InputProps {
  name?: string;
  type: string;
  label?: string;
  value?: string | number;
  watch?: (val: any) => void;
  error?: string;
  required?: boolean;
  placeholder?: string;
  className?: string;
  rule?: Record<string, any>;
  checkRuleOnBlur?: boolean;
  autoComplete?: string;
}

License

MIT