@matthew.ngo/reform

Reform

Reform is a powerful React form management library designed for complex, multi-group forms with advanced validation and state management capabilities.

Features

• Multi-group Forms: Easily manage forms with multiple related data groups
• Type Safety: Full TypeScript support with strong typing
• Validation: Flexible validation with Yup integration
• Conditional Fields: Show/hide fields based on form values
• Field Arrays: Manage dynamic arrays within form groups
• Form Persistence: Save and restore form state across sessions
• Form Watching: Observe and react to form field and state changes
• Form Wizard: Create multi-step forms with navigation and validation
• Error Handling: Comprehensive error formatting and display

Installation

npm install @reform/core

or

yarn add @reform/core

Quick Start

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>
  );
};

Documentation

For comprehensive documentation, please visit:

Reform Documentation

The documentation includes:

• Core modules (Form Management, Validation, Error Handling)
• Advanced features (Conditional Fields, Field Arrays, Persistence, etc.)
• Complete API reference
• Examples and use cases

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.