RHFProvider / RHFLiveProvider
Form halaman dengan react-hook-form dan yup, tanpa menulis kode form-nya sendiri. Dua cara simpan: kirim sekali di akhir, atau simpan per field begitu selesai diisi.
Demo
Coba: ubah No. WhatsApp jadi nomor yang salah.
Profil toko
Kirim sekali: semua nilai dicek dan dikirim saat Simpan ditekan. Contoh, tidak dikirim ke mana pun.
Contoh data. Tidak ada yang dikirim ke mana pun, dan nilainya hilang saat halaman dimuat ulang.
Yang sudah dikerjakan kit
- Error server ke field-nya. onSubmit mengembalikan Result. fieldErrors mendarat di field masing-masing, sisanya di atas tombol.
- Simpan langsung. Field selesai diisi, langsung dicek dan disimpan. Beberapa field dalam satu jeda dikirim dalam satu request.
- Aturan antar field. Tutup harus lebih lambat dari Buka: aturan yang melihat dua field sekaligus, tidak hanya satu.
- Fokus ke error. Submit gagal memfokus field pertama yang salah, tidak tertutup keyboard atau bar bawah di HP.
- Bertahap dan berulang. RHFSteps untuk form beberapa langkah, RHFFieldArray untuk baris yang bisa ditambah dan digeser.
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>
);
}Untuk kirim sekali, ganti dengan RHFProvider dan RHFSubmitButton. Halaman tidak pernah mengimpor react-hook-form langsung.
Field yang tersedia
Setiap field punya pasangan RHF:
RHFTextFieldRHFNumberFieldRHFSelectRHFObjectSelectRHFUserSelectRHFCheckboxRHFRadioGroupRHFSwitchRHFDatePickerRHFPhoneFieldRHFOtpInputRHFTagsInputRHFSliderRHFRatingRHFRichTextEditorRHFFileUploaderRHFAddressFields