@allem-sdk/forms

Lightweight form management and validation for React. No heavy dependencies, just hooks.

Installation

npm install @allem-sdk/forms

Usage

import { useForm, required, email, minLength } from "@allem-sdk/forms";

function ContactForm() {
  const form = useForm({
    name: { initialValue: "", rules: [required("Name is required")] },
    email: { initialValue: "", rules: [required(), email()] },
    message: { initialValue: "", rules: [required(), minLength(10)] },
  });

  const onSubmit = async (values: typeof form.values) => {
    await fetch("/api/contact", {
      method: "POST",
      body: JSON.stringify(values),
    });
  };

  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <input {...form.getFieldProps("name")} />
      {form.touched.name && form.errors.name && <span>{form.errors.name}</span>}

      <input {...form.getFieldProps("email")} />
      <textarea {...form.getFieldProps("message")} />
      <button type="submit">Send</button>
    </form>
  );
}

Validators

| Validator | Description | |-----------|-------------| | required(msg?) | Field must not be empty | | minLength(n, msg?) | Minimum string length | | maxLength(n, msg?) | Maximum string length | | min(n, msg?) | Minimum numeric value | | max(n, msg?) | Maximum numeric value | | pattern(regex, msg?) | Match a regular expression | | email(msg?) | Valid email format | | url(msg?) | Valid URL format | | custom(fn, msg?) | Custom validation function |

Exports

| Export | Type | Description | |--------|------|-------------| | useForm | Hook | Full form management: values, errors, touched, submit, reset | | useField | Hook | Standalone single-field hook with validation | | Validators | Functions | 9 built-in validators (see table above) |

Part of Allem SDK

This package can be used standalone or as part of the full SDK. Install allem-sdk to get all packages in one install.

Support

If you find Allem SDK useful, consider supporting its development:

License

MIT - Ahmed Allem