Form adalah jembatan antara UI dan Database. Saya sendiri pernah menciptakan library form untuk android bernama ArisanForm. ArisanForm sendiri mengubah model menjadi form namun saat ini hanya berlaku pada class.
Sekarang saya sedang berpetualang untuk mencari form terbaik di React js. Dalam official tutorial milik reactjs, kita harus memasang fungsi listener untuk tiap input : https://reactjs.org/docs/forms.html
<input onChange={handleChange} />
hal ini cukup merepotkan karena sebelum ada react, jquery sudah memudahkan kita dengan
.serializeArray() miliknya. sekarang kita akan cari apakah ada yang menyamai jquery atau lebih baik lagi.
1. Formik
https://formik.org/
Formik merupakan template pembuat form.
+ memiliki kemampuan onSubmit dengan value didalam form
- menggantikan native code <input> dengan <Field> miliknya
2. MSON
https://github.com/redgeoff/mson-react
+ Hanya butuh json untuk membuat form
- tidak dimaintenance oleh owner dan dokumentasi yang sulit
3. React Hook Form
https://react-hook-form.com/get-started
+ bisa dipasang di native form. <form onSubmit={handleSubmit} /> handle submit berasal dari library
- masih butuh register di input nya <input {...registerForm("firstName")}
4. React Form
https://codesandbox.io/s/react-form-demo-950ww?file=/src/index.js
+ punya fitur onSubmit dengan value semua field di dalam form
- menggantikan <form> native dengan miliknya
- registrasi form di setiap
5. React Form Bootstrap
https://react-bootstrap.github.io/components/forms/
+ All in template untuk tampilan
- Tidak sesuai yang dicari, masih seperti react form. butuh handleChange di tiap inputnya
6. React Simple Form
https://www.npmjs.com/package/simple-react-form
+ it handle change from all input
- replace native element, submit using refs, class component
7. React Cool Form
https://www.npmjs.com/package/react-cool-form
+ it handle onSubmit and default value
- replace native element
COMBINE WITH TEMPLATE
This is the challenge. why you guys like to replace form with yours? is there library which can used in other library like we have react-bootstrap and material-ui. we cannot replace their TextField.
1. React Hook Form + Material UI
https://blog.logrocket.com/using-material-ui-with-react-hook-form/
this tutorial tell to wrap all form inside Controller.
