@matthew.ngo/reform/src/docs/index.md

A flexible and powerful React form management library with advanced validation, state observation, and multi-group support

# Reform Documentation

Welcome to the Reform documentation. This guide will help you navigate through all the available modules and features of the Reform library.

## Core Modules

Reform's core functionality is built around these fundamental modules:

- [**Form Management**](./core/form.md) - Create and manage complex forms with multiple groups
- [**Validation**](./core/validation.md) - Validate form data with multiple strategies
- [**Error Handling**](./core/errors.md) - Format, transform, and display form errors

## Features

Reform provides several advanced features to enhance your form experience:

- [**Conditional Fields**](./features/conditional.md) - Show/hide fields based on form values
- [**Field Arrays**](./features/field-array.md) - Manage dynamic arrays within form groups
- [**Form Persistence**](./features/persistence.md) - Save and restore form state across sessions
- [**Form Watcher**](./features/watcher.md) - Observe and react to form field and state changes
- [**Form Wizard**](./features/wizard.md) - Create multi-step forms with navigation and validation

## API Reference

For a comprehensive overview of all available APIs:

- [**Complete API Reference**](./api.md) - Detailed documentation of all Reform APIs

## Getting Started

If you're new to Reform, we recommend starting with these guides:

1. First, understand the [Form Management](./core/form.md) basics
2. Learn how to implement [Validation](./core/validation.md)
3. Explore [Error Handling](./core/errors.md) capabilities
4. Add advanced features like [Conditional Fields](./features/conditional.md) or [Field Arrays](./features/field-array.md)

## Examples

Here are some common use cases and examples:

### Basic Form

```tsx
import { useReform } from '@reform/core';

type UserForm = {
  name: string;
  email: string;
};

const UserFormComponent = () => {
  const form = useReform<UserForm>({
    defaultData: {
      name: '',
      email: '',
    },
    minGroups: 1,
  });

  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

  return (
    <form onSubmit={form.formMethods.handleSubmit(handleSubmit)}>
      <div>
        <label>Name</label>
        <input {...form.register(0, 'name')} />
      </div>
      <div>
        <label>Email</label>
        <input {...form.register(0, 'email')} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
```

### Multi-Group Form

```tsx
import { useReform } from '@reform/core';

type ContactForm = {
  name: string;
  email: string;
  phone: string;
};

const ContactListForm = () => {
  const form = useReform<ContactForm>({
    defaultData: {
      name: '',
      email: '',
      phone: '',
    },
    minGroups: 1,
  });

  const handleAddContact = () => {
    form.addGroup();
  };

  const handleSubmit = (data: any) => {
    console.log('Contacts:', data.groups);
  };

  return (
    <form onSubmit={form.formMethods.handleSubmit(handleSubmit)}>
      {form.getGroups().map((group, index) => (
        <div key={group.id} className="contact-group">
          <h3>Contact {index + 1}</h3>
          <div>
            <label>Name</label>
            <input {...form.register(index, 'name')} />
          </div>
          <div>
            <label>Email</label>
            <input {...form.register(index, 'email')} />
          </div>
          <div>
            <label>Phone</label>
            <input {...form.register(index, 'phone')} />
          </div>
          {index > 0 && (
            <button type="button" onClick={() => form.removeGroup(index)}>
              Remove
            </button>
          )}
        </div>
      ))}
      <button type="button" onClick={handleAddContact}>
        Add Contact
      </button>
      <button type="submit">Submit</button>
    </form>
  );
};
```

## Need Help?

If you need additional help or have questions, please:

- Check the [API Reference](./api.md) for detailed information
- Visit our GitHub repository for examples and issues
- Join our community for discussions and support