use-quick-form

Lightweight React form hook with built-in validation — a simpler alternative to react-hook-form + zod for common use cases.

Install

npm install use-quick-form
# or
pnpm add use-quick-form

Peer dependency: React 18+

Quick start

import { useQuickForm, object, string } from 'use-quick-form'

type FormValues = {
  name: string
  email: string
}

function SignUpForm() {
  const form = useQuickForm<FormValues>({
    defaultValues: { name: '', email: '' },
    fields: {
      name: { required: true },
      email: { required: true, type: 'email' },
    },
    schema: object({
      name: string().min(1, 'Name is required').noDigits(),
      email: string().min(1, 'Email is required').email(),
    }),
    onSubmit: (values) => console.log(values),
  })

  return (
    <form {...form.formProps}>
      <label>
        Name
        <input {...form.register('name')} />
      </label>
      {form.getFieldError('name') && <span>{form.getFieldError('name')}</span>}

      <label>
        Email
        <input type="email" {...form.register('email', { type: 'email' })} />
      </label>
      {form.getFieldError('email') && <span>{form.getFieldError('email')}</span>}

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

API

useQuickForm(options)

| Option | Description | |--------|-------------| | defaultValues | Initial form values | | schema | Built-in schema from object(), string(), etc. | | basicValidation | Infer rules from field names/types when no schema | | fields | Per-field metadata (required, type) | | mode | 'onChange' | 'onBlur' | 'onSubmit' | | onSubmit | Called with validated values |

Returns

| Property | Description | |----------|-------------| | formProps | Spread on <form> (onSubmit, noValidate) | | register(name, options?) | Bind inputs (value, onChange, aria-invalid, required) | | getFieldError(name) | Error text when field is touched or submit was attempted | | isFieldInvalid(name) | Whether to show invalid styling | | isFieldRequired(name) | Whether field is marked required | | canSubmit | Whether schema validation passes | | values, errors, touched, reset, setValue, validate | State and controls |

Schema builders

• string() — .min(), .max(), .email(), .regex(), .noDigits(), .digitsOnly(), .refine(), .optional()
• number() — .min(), .max()
• boolean() — .mustBeTrue()
• object({ field: schema, ... })

Error display behavior

• Errors show after a field is blurred (or changed for checkboxes)
• Clicking Submit reveals all remaining errors without requiring touch
• Required fields get the HTML required attribute when configured in fields

License

MIT