📖 use-validate-react Documentation

📝 Overview

use-validate-react is a lightweight and flexible React hook that simplifies form validation. It supports both default and custom validation rules for easy form handling.

📦 Installation

Install the package using npm or yarn:

1npm install use-validate-react

OR

1yarn add use-validate-react

🚀 Usage Guide

🔹 Basic Example (JavaScript)

1import { useValidateForm } from "use-validate-react";
2import React, { useState } from "react";
3
4const MyForm = () => {
5const { validate, errors } = useValidateForm();
6const [formData, setFormData] = useState({ email: "", password: "" });
7
8    # Validation rules are optional, by default validation error will be This field is required but you can add your own validation rules like below.
9
10    const handleSubmit = () => {
11        const result = validate(formData, [], {
12            email: (value) => (!/\S+@\S+\.\S+/.test(value) ? "Invalid email format" : null),
13            password: (value) => (value.length < 6 ? "Password must be at least 6 characters" : null),
14        });
15
16        if (result.isValid) {
17            console.log("Form is valid, submitting...");
18        }
19    };
20
21    return (
22        <div>
23            <input
24                type="text"
25                value={formData.email}
26                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
27            />
28            {errors.email && <p>{errors.email}</p>}
29
30            <input
31                type="password"
32                value={formData.password}
33                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
34            />
35            {errors.password && <p>{errors.password}</p>}
36
37            <button onClick={handleSubmit}>Submit</button>
38        </div>
39    );
40
41};
42
43export default MyForm;

🔹 TypeScript Example

1import { useValidateForm } from "use-validate-react";
2import React, { useState } from "react";
3
4interface FormData {
5email: string;
6password: string;
7}
8
9const MyForm: React.FC = () => {
10const { validate, errors } = useValidateForm();
11const [formData, setFormData] = useState<FormData>({ email: "", password: "" });
12
13    const handleSubmit = () => {
14        const result = validate(formData, [], {
15            email: (value) => (!/\S+@\S+\.\S+/.test(value) ? "Invalid email format" : null),
16            password: (value) => (value.length < 6 ? "Password must be at least 6 characters" : null),
17        });
18
19        if (result.isValid) {
20            console.log("Form is valid, submitting...");
21        }
22    };
23
24    return (
25        <div>
26            <input
27                type="text"
28                value={formData.email}
29                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
30            />
31            {errors.email && <p>{errors.email}</p>}
32
33            <input
34                type="password"
35                value={formData.password}
36                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
37            />
38            {errors.password && <p>{errors.password}</p>}
39
40            <button onClick={handleSubmit}>Submit</button>
41        </div>
42    );
43
44};
45
46export default MyForm;

📌 API Reference

1️⃣ useValidateForm()

Returns an object containing: - validate(formData, requiredFields, customRules) - Validates formData based on default or custom validation rules. - Returns { isValid: boolean, errors: Record<string, string> } - errors: An object storing validation error messages.

Example of Custom Validation

1const validationRules = {
2    email: (value) => (!/\S+@\S+\.\S+/.test(value) ? "Invalid email format" : null),
3    password: (value) => (value.length < 8 ? "Must be at least 8 characters" : null),
4};
5const result = validate(formData, [], validationRules);

🎯 Features

✔ Lightweight & Easy to Use ✔ Supports Custom Validation Rules ✔ TypeScript Compatible ✔ Handles Multiple Fields Automatically ✔ Works with Controlled Components

📜 License This project is MIT Licensed.

📞 Need Help? If you find an issue or have suggestions, feel free to open an issue.

Happy coding! 🚀