React - łatwa i przyjemna obsługa formularzy

React-hook-form to biblioteka, która znacząco upraszcza obsługę i walidację formularzy w React. Warto się nią zainteresować z uwagii na prostą składnię, świetną dokumentację oraz dobrą wydajność na tle innych bibliotek.

Przykładowa składnia:

import React from 'react'
import { useForm } from 'react-hook-form'

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => { console.log(data) } // funkcja obsługująca formularz, np. wysłanie parametrów do API

  return (
    {/* "handleSubmit" wykona walidacje przed wywołaniem funkcji obsługjącej formularz "onSubmit" */}

    <form onSubmit={handleSubmit(onSubmit)}>
    {/* oznacz inputa z użyciem funkcji "register",  inaczej biblioteka nie uwzględni pola*/}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* opcjonalnie możesz dodać walidacje, np. pole jest wymagane lub musi spełaniać określone wyrażenie regularne */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* błędy walidacji umieszczone będą w obiekcie errors */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  )
}