@reformer/core

Reactive form state management library for React with signals-based architecture.

Playground

Documentation

Full documentation is available at https://alexandrbukhtatyy.github.io/ReFormer/

Features

• Signals-based reactive state management
• Declarative form validation
• Dynamic form behaviors
• TypeScript support
• Tree-shakeable exports

Installation

npm install @reformer/core@beta # Active development is underway, so you can try beta

Quick Start

import { useMemo } from 'react';
import {
  createForm,
  useFormControl,
  required,
  email,
  validate,
  watchField,
  FieldNode,
} from '@reformer/core';

// 0. Simple FormField component
function FormField({ label, control }: { label: string; control: FieldNode<string> }) {
  const { value, errors } = useFormControl(control);

  return (
    <div>
      <label>{label}</label>
      <input
        value={value}
        onChange={(e) => control.setValue(e.target.value)}
        onBlur={() => control.markAsTouched()}
      />
      {errors.length > 0 && <span className="error">{errors[0].message}</span>}
    </div>
  );
}

// 1. Define form interface
interface RegistrationForm {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
}

// 2. Form schema
const formSchema = {
  username: { value: '' },
  email: { value: '' },
  password: { value: '' },
  confirmPassword: { value: '' },
};

// 3. Validation schema
validationSchema = (path) => {
  required(path.username);

  required(path.email);
  email(path.email);

  required(path.password);
  required(path.confirmPassword);

  // Cross-field validation: passwords must match
  validate(path.confirmPassword, (value, ctx) => {
    const password = ctx.form.password.value.value;
    if (value && password && value !== password) {
      return { code: 'mismatch', message: 'Passwords do not match' };
    }
    return null;
  });
};

// 4. Behavior schema
behavior = (path) => {
  // Clear confirmPassword when password changes (if not empty)
  watchField(path.password, (_, ctx) => {
    const confirmValue = ctx.form.confirmPassword.value.value;
    if (confirmValue) {
      ctx.form.confirmPassword.setValue('', { emitEvent: false });
    }
  });
};

// 5. Registration form component
function RegistrationFormExample() {
  const form = useMemo(
    () =>
      createForm<RegistrationForm>({
        form: formSchema,
        validation: validationSchema,
        behavior: behaviorSchema,
      }),
    []
  );

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await form.validate();
    if (form.valid.value) {
      console.log('Form data:', form.value.value);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormField label="Username" control={form.username} />
      <FormField label="Email" control={form.email} />
      <FormField label="Password" control={form.password} />
      <FormField label="Confirm Password" control={form.confirmPassword} />
      <button type="submit">Register</button>
    </form>
  );
}

License

MIT