form-provider
v0.1.2The single place `react-hook-form` is imported directly in this repo. Everything else should import form state/control from here instead of `react-hook-form` — that keeps the underlying library swappable from one spot later.
The single place react-hook-form is imported directly in this repo. Everything else should import form state/control from here instead of react-hook-form — that keeps the underlying library swappable from one spot later.
Re-exports: FormProvider (thin wrapper around RHF's own FormProvider), Form (convenience <form> wired to handleSubmit, with FormProvider already applied), useForm, useFormContext, useController, useFormState, useWatch, Controller, plus the common RHF types (UseFormReturn, FieldValues, SubmitHandler, Control, FieldErrors, ...).
Usage
The common case — a form with a real submit action — use Form:
If you need the raw <form> element for something Form doesn't cover, use FormProvider + handleSubmit directly:
Not every input needs this. TextField, Checkbox, etc. all work standalone with plain useState for simple one-off cases, and UI with no real submit moment — live/instant field-by-field editing, for example — should just use the bare atoms + FormField for layout, not Form/useForm. Reach for this package when you actually need multi-field form state, validation, or a real submit action.
Compositions
Open all 2 →Properties
Form props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Form content, typically FormField-wrapped controls |
methods* | UseFormReturn<TFieldValues> | — | The return value of `useForm()` |
onSubmit* | SubmitHandler<TFieldValues> | — | Called with the validated values when the form is submitted |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).
FormProvider props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Descendants that will consume the form context via `useFormContext()` |
methods* | UseFormReturn<TFieldValues> | — | The return value of `useForm()` (re-exported from this package) |