mongez-react-form

---

Why @mongez/react-form?

react-hook-form is fast because it leans on uncontrolled refs — but its API surface is huge and React Native support requires a separate adapter. formik is controlled by default and re-renders the whole tree on every keystroke. react-final-form works but is effectively unmaintained. Hand-rolling form state with useState per input means you rewrite empty-value handling, dirty tracking, and validation every project.

@mongez/react-form ships one useFormControl hook that owns the value, runs a localized rule pipeline, and registers itself with the nearest <Form> (web) or <NativeForm> (React Native) — same hooks, same rules, on both platforms. Validation rules are plain data objects, not strings, so you can compose them, override messages per instance, or write your own. Dot-notation name props (user.email, addresses.0.city) nest collected values into objects on submit. No schema layer, no <Controller> wrappers, no register("name") boilerplate.

import { Form, useFormControl, requiredRule, emailRule } from "@mongez/react-form";

function TextInput(props) {
  const { value, changeValue, error, otherProps } =
    useFormControl({ ...props, rules: [requiredRule, emailRule] });
  return (
    <>
      <input value={value} onChange={(e) => changeValue(e.target.value)} {...otherProps} />
      {error && <span>{error}</span>}
    </>
  );
}

<Form onSubmit={({ values }) => api.signup(values)}>
  <TextInput name="email" type="email" required />
  <button type="submit">Sign up</button>
</Form>

---

Features

Feature	Description
<Form> and <NativeForm>	Concrete components for web (<form> element) and React Native (Fragment + optional component prop). Same context, same hooks.
useFormControl	Register any input, get back value / changeValue / error / checked / inputRef / otherProps. Always controlled internally.
Dot-notation name	user.email and addresses.0.city nest into { user: { email }, addresses: [{ city }] } on submit.
Composable rule pipeline	Plain InputRule data with validate, requiresType, requiresValue, preservedProps. Built-ins cover required, length, min/max, email, url, pattern, match, strong-password, and more. Async returns supported.
Locale-aware errors	Messages flow through @mongez/localization. Bundles ship for en, ar, fr, es, it, de.
useRadioInput + RadioGroupContext	One useFormControl owns the selected value; each radio reads it through context.
HiddenInput	One-line component for csrf tokens, hidden ids, computed values.
useSubmitButton	Subscribes to submitting / invalidControls / dirty events; returns disabled / isSubmitting / isDirty.
React Native support	react-native is not a peer dep; NativeForm renders a Fragment unless you pass component={View}.
BaseForm engine	Abstract class you can subclass to support any React renderer.

---

Installation

npm install @mongez/react-form

yarn add @mongez/react-form

pnpm add @mongez/react-form

Peer: react >= 18. Runtime deps install transitively: @mongez/events, @mongez/localization, @mongez/supportive-is, @mongez/reinforcements.

---

Quick start

import { extend } from "@mongez/localization";
import {
  Form, useFormControl, useSubmitButton,
  requiredRule, emailRule, enValidationTranslation,
  type FormControlProps,
} from "@mongez/react-form";

// 1. Register validation messages once at app entry — without this,
//    errors render as raw keys like "validation.required".
extend("en", { validation: enValidationTranslation });

// 2. Build a thin UI wrapper around useFormControl — this is YOUR component.
function TextInput(props: FormControlProps) {
  const { value, changeValue, id, error, inputRef, otherProps } =
    useFormControl({ rules: [requiredRule, emailRule], ...props });

  return (
    <>
      <input id={id} ref={inputRef} value={value}
             onChange={(e) => changeValue(e.target.value)} {...otherProps} />
      {error && <span className="error">{error}</span>}
    </>
  );
}