Petualangan mencari Form Terbaik (React js - Frontend)

November 26, 2021

 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.

You Might Also Like

0 komentar

Like us on Facebook