easy-form-handler
Version:
A powerful, lightweight React form handling library with built-in validation, customizable styling, and intuitive components.
274 lines (224 loc) • 7.47 kB
Markdown
# Easy Form Handler
A powerful, lightweight React form handling library with built-in validation, customizable styling, and intuitive components.
<div align="center">
<code><img width="40" src="https://raw.githubusercontent.com/marwin1991/profile-technology-icons/refs/heads/main/icons/javascript.png" alt="JavaScript" title="JavaScript"/></code>
<code><img width="40" src="https://raw.githubusercontent.com/marwin1991/profile-technology-icons/refs/heads/main/icons/react.png" alt="React" title="React"/></code>
<code><img width="40" src="https://raw.githubusercontent.com/marwin1991/profile-technology-icons/refs/heads/main/icons/typescript.png" alt="TypeScript" title="TypeScript"/></code>
<code><img width="40" src="https://raw.githubusercontent.com/marwin1991/profile-technology-icons/refs/heads/main/icons/npm.png" alt="npm" title="npm"/></code>
<code><img width="40" src="https://raw.githubusercontent.com/marwin1991/profile-technology-icons/refs/heads/main/icons/node_js.png" alt="Node.js" title="Node.js"/></code>
</div>
## 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
```bash
npm install easy-form-handler
# or
yarn add easy-form-handler
```
## Basic Usage
```tsx
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
```tsx
<Form
onSubmit={handleSubmit}
isActiveDefaultStyle={true}
className="my-custom-form"
>
{/* Form content */}
</Form>
```
### Input
Text input with validation and error handling
```tsx
<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
```tsx
<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
```tsx
<Heading>Registration Form</Heading>
```
### Submit
Submit button with default styling
```tsx
<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.
```tsx
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
---
<div style="display:flex;justify-content:center;align-items:center;gap:10px; width: 100%;">
<p style="margin-top: 12px;">
Made with ❤️ by the Deep Das</p> <img width="30" height="30" src="https://avatars.githubusercontent.com/u/107903218?v=4" alt="JavaScript" title="JavaScript" style="border-radius: 50%;"/>
</div>