RHFProvider / RHFLiveProvider
Page forms with react-hook-form and yup, without writing the form code yourself. Two ways to save: send once at the end, or save each field as soon as it is filled in.
Demo
Try it: change the WhatsApp number to a wrong one.
Store profile
Send once: every value is checked and sent when Save is pressed. A sample, nothing goes anywhere.
Sample data. Nothing is sent anywhere, and the values are lost when the page reloads.
What the kit already does
- Server errors go to their field. onSubmit returns a Result. fieldErrors land on their own fields, the rest above the button.
- Save as you go. A finished field is checked and saved at once. Several fields within one pause go in one request.
- Rules between fields. Closes must be later than Opens: a rule that looks at two fields at once, not just one.
- Focus on the error. A failed submit focuses the first wrong field, clear of the keyboard and the bottom bar on a phone.
- Steps and repeats. RHFSteps for a form in several steps, RHFFieldArray for rows that can be added and moved.
export function StoreProfile() {
return (
<RHFLiveProvider
schema={storeSchema}
defaultValues={store}
onSave={(changes) => updateStore(changes)}
>
<RHFLiveStatus />
<RHFTextField name="name" label="Nama toko" />
<RHFPhoneField name="whatsapp" label="No. WhatsApp" />
</RHFLiveProvider>
);
}For send once, swap in RHFProvider and RHFSubmitButton. The page never imports react-hook-form directly.
Available fields
Every field has an RHF twin:
RHFTextFieldRHFNumberFieldRHFSelectRHFObjectSelectRHFUserSelectRHFCheckboxRHFRadioGroupRHFSwitchRHFDatePickerRHFPhoneFieldRHFOtpInputRHFTagsInputRHFSliderRHFRatingRHFRichTextEditorRHFFileUploaderRHFAddressFields