React Form Gen

React Form Gen

Generate type-safe React forms from Zod schemas. No boilerplate.

Quick Start

npm install react-form-gen zod react-hook-form @hookform/resolvers

Usage

Basic form

import { FormGen } from 'react-form-gen'
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
  age: z.number().min(18).optional(),
  role: z.enum(['admin', 'user', 'guest']),
})

function MyForm() {
  return (
    <FormGen
      schema={schema}
      onSubmit={(data) => console.log(data)}
      submitLabel="Save"
    />
  )
}

With custom field components

<FormGen
  schema={schema}
  onSubmit={handleSubmit}
  fieldComponents={{
    email: MyCustomEmailField,
  }}
  fieldOverrides={{
    role: MyCustomRoleSelector,
  }}
/>

Multi-step wizard

The layout prop supports 'vertical' (default), 'horizontal', and 'inline'. For multi-step forms, use conditional fields:

const schema = z.object({
  step: z.enum(['personal', 'account', 'confirm']),
  name: z.string().min(1).optional(),
  email: z.string().email().optional(),
  password: z.string().min(8).optional(),
})

Conditional fields

// Field config example (internal)
const field = {
  name: 'bio',
  type: 'textarea',
  condition: {
    field: 'hasBio',
    value: true,
    operator: 'equals',
  },
}

API

FormGen

useFormGen

const { fields, form, handleSubmit, isSubmitting, reset } = useFormGen({
  schema,
  onSubmit,
  defaultValues,
})

Field Types