🛡️ rapid-form-forge

A high-performance, ultra-lightweight, and zero-boilerplate form validation library for React and Vanilla JS.

Designed to be simpler than Formik and faster than React Hook Form by using uncontrolled inputs and selective re-rendering.

✨ Features

• 🚀 High Performance: Zero unnecessary re-renders.
• ⚛️ Framework Agnostic: Works perfectly with React, Vue, Svelte, or just plain HTML/JS.
• 🛠️ Zero Boilerplate: 1-line setup for most forms.
• ⏱️ Sync & Async: Native support for API checks and complex logic.
• 🔌 Highly Extensible: Easily add your own custom validation rules.
• 📦 Tiny & Tree-shakable: Only pay for the rules you use.

📦 Installation

npm install rapid-form-forge
# or
yarn add rapid-form-forge

🚀 Quick Start (React)

The easiest way to use rapid-form-forge in React is with the useValidator hook.

import { useValidator } from 'rapid-form-forge/react';

function App() {
  const { register, handleSubmit, errors } = useValidator({
    schema: {
      email: ['required', 'email'],
      password: ['required', 'min:8']
    }
  });

  const onSubmit = (data) => console.log("Form Data:", data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} placeholder="Email" />
      {errors.email && <span>{errors.email}</span>}

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

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

🍦 Quick Start (Vanilla JS)

Pure JavaScript support without any dependencies.

import { validate } from 'rapid-form-forge';

const schema = {
  username: ['required', 'min:3']
};

const data = { username: 'ab' };

const { isValid, errors } = await validate(data, schema);

if (!isValid) {
  console.log(errors.username); // "Value is too short"
}

🛠️ API Reference

useValidator(config) (React Hook)

| Option | Type | Description | | :--- | :--- | :--- | | schema | Object | Your validation rules. | | mode | string | When to validate ('onSubmit', 'onBlur', 'onChange'). Default: 'onSubmit'. | | reValidateMode | string | Behavior after first submit attempt. Default: 'onChange'. | | delay | number | Debounce delay in ms. | | initialValues | Object | Starting values for the form. |

Returns: register, handleSubmit, errors, touched, isSubmitting, isValidating, reset.

validate(data, schema) (Async Function)

Validates a raw object against a schema. Returns { isValid, errors }.

🛡️ Built-in Rules

You can use these as strings in your schema:

• 'required': Field cannot be empty.
• 'email': Must be a valid email format.
• 'min:X': Minimum string length (e.g., 'min:8').
• 'max:X': Maximum string length.
• 'pattern:REGEX': Custom regex check.

🧪 Advanced Usage

Custom Rules

Register your own logic globally to use it anywhere.

import { globalRegistry } from 'rapid-form-forge';

globalRegistry.register('isZipCode', (val) => /^\d{5}$/.test(val), 'Invalid Zip Code');

// Use it in your schema
const schema = {
  zip: ['required', 'isZipCode']
};

Async Validation

Perfect for checking if a username is taken or verifying a promo code via API.

const schema = {
  username: [
    'required',
    async (val) => {
      const res = await fetch(`/api/check?u=${val}`);
      return res.ok ? null : 'Username is already taken';
    }
  ]
};

🤔 Why rapid-form-forge?

| Feature | React Hook Form | Formik | Rapid Form Forge | | :--- | :--- | :--- | :--- | | Learning Curve | Medium | High | Low | | Performance | Good | Fair | Best (Proxy-based) | | Bundle Size | ~9kb | ~15kb | ~2kb | | Vanilla JS | No | No | Yes |

📄 License

MIT © rapid-form-forge