Hero Hook Form

Typed form helpers that combine React Hook Form and HeroUI components.

Hero Hook Form provides a comprehensive solution for building accessible, performant forms in React applications. It combines the power of React Hook Form with HeroUI’s beautiful design system, offering type-safe form building with minimal boilerplate.

Quick Start

Get started in minutes with a simple form:

import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
});
 
export function ContactForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.input("name", "Name"),
          FormFieldHelpers.input("email", "Email", "email"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}

Install: npm install @rachelallyson/hero-hook-form

Key Features

• 🎯 Type Safety - Full TypeScript support with automatic type inference
• 🎨 HeroUI Integration - Beautiful, accessible components out of the box
• ⚡ Performance - Optimized with React.memo and debounced validation
• 🔧 Flexible APIs - Multiple form building patterns to suit your needs
• 📝 Zod Integration - Seamless schema validation with Zod
• 🔄 Dynamic Forms - Conditional fields, field arrays, and dynamic sections
• 🧪 Testing Ready - Built-in testing utilities for Cypress

Choose Your Path

🚀 New to Hero Hook Form?

Start with the basics and build your first form:

• Quick Start Guide - Build a form in 5 minutes
• Core Concepts - Understand the architecture
• Installation - Set up the package

📚 Building Something Specific?

Find guides for your use case:

• Dynamic Forms - Conditional fields and arrays
• Error Handling - Validation and error management
• Performance - Optimization tips
• Testing - Testing strategies

🔍 Need Reference?

Look up APIs and configuration:

• API Reference - Complete API documentation
• Configuration - All configuration options
• Recipes - Copy-paste examples

💡 Looking for Examples?

See real-world implementations:

• Live Demos - Interactive examples
• Recipe Examples - Common patterns
• Troubleshooting - Solutions to common issues

Form Building Patterns

Hero Hook Form supports multiple patterns to fit your coding style:

1. Helper Functions (Recommended)

Simple and straightforward:

const fields = [
  FormFieldHelpers.input("name", "Name"),
  FormFieldHelpers.textarea("message", "Message"),
  FormFieldHelpers.select("country", "Country", options),
];

2. Builder Pattern

Fluent API for method chaining:

import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
 
const fields = createBasicFormBuilder()
  .input("name", "Name")
  .textarea("message", "Message")
  .select("country", "Country", options)
  .build();

3. Type-Inferred Forms

Automatic schema generation:

import { defineInferredForm, field } from "@rachelallyson/hero-hook-form";
 
const form = defineInferredForm({
  name: field.string("Name"),
  email: field.email("Email"),
  age: field.number("Age"),
});

What’s Included

Components

• Form, FormField, ZodForm, ServerActionForm
• Field components: InputField, SelectField, CheckboxField, etc.
• FormStatus for loading/success/error states

Hooks

• useFormHelper - Form management utilities
• useHeroForm - Enhanced form hook
• useEnhancedFormState - Advanced state tracking
• useDebouncedValidation - Performance optimization
• useInferredForm - Type-inferred forms

Builders

• createBasicFormBuilder - Simple form builder
• createAdvancedBuilder - Advanced builder with more options
• FormFieldHelpers - Helper functions for all field types

Utilities

• applyServerErrors - Server error handling
• Validation helpers - Common validation patterns
• Performance utilities - Optimization helpers
• Testing utilities - Cypress integration

What’s New in v2.0

• Dynamic Form Sections - Conditional fields and field arrays
• Enhanced Performance - Memoized components and debounced validation
• Type-Inferred Forms - Alternative API with automatic schema generation
• Form State Management - Enhanced state tracking and status components
• Validation Patterns - Cross-field validation and common patterns

Community & Support

• GitHub: rachelallyson/hero-hook-form 
• Issues: Report bugs or request features 
• Discussions: Community discussions 

License

ISC License - see LICENSE  for details.