Membuat Form dengan React Hook Form

React Hook Form merupakan library yang menawarkan fitur 2 yang dibutuhkan dalam pembuatan sebuah form seperti validasi dengan tetap memerhatikan perfoma dari aplikasi

di react ada 2 tipe component untuk form

Uncontroller Component uncontrolled components kurang lebih sama seperti HTML tradional yaitu menyimpan state nya internaly dengan melakukan query ke DOM menggunakan ref untuk menemukan nilai dari input

import { useForm, SubmitHandler } from "react-hook-form"

type Inputs = {
  example: string
  exampleRequired: string
}

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>()
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />

      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  )
}

Controlled Components controlled components menyimpan value nya secara external contoh disimpan di useState di dan dikirimkan lewat props value dan perubahannya didapatkan dari props onChange

import { useForm, SubmitHandler, Controller } from "react-hook-form"
import { Select } from "react-select"

export default function App() {
  const {
    handleSubmit,
    watch,
    control,
  } = useForm<Inputs>()
  const [selected, setSelected] = useState()

  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  console.log(watch("example")) // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="example"
        control={control}
        render={({ field: { onChange } }) => (
          <Select
            options={[]}
            onChange={(selected) => {
              onChange(selected)
              setSelected(selected)
            }}
            value={selected}
          />
        )}
      />
      <input type="submit" />
    </form>
  )
}

Hooks useForm

berikut method2 yang sering digunakan:

register -> method ini digunakanan untuk membuat uncontrolled components
formState -> misal ada field yg sudah didaftarkan lewat register maupun Controller memiliki rules required namun ketika submit belum diisi maka kondisi error nya akan disimpan didalam object ini di dalam variabel errors
watch -> method ini digunakan untuk mendapatkan nilai dari sebuah atau semua field dan mentrigger re-render
getValues -> method ini digunakan untuk mendapatkan nilai dari sebuah atau semua field namun tidak mentrigger re-render
reset -> method ini digunakan untuk mengembalikan nilai semua field kembali ke default
handleSubmit -> method ini akan mentrigger validasi yang sudah dibuat jika semua terpenuhi, maka akan mengembalikan nilai dari semua field
setError -> untuk membuat error yg lebih flexible contohnya tidak menunggu handleSubmit dipanggil bisa menggunakan method ini

Membuat Form dengan React Hook Form

Hooks useForm​

Hooks useForm