Begrip: useForm

De useForm hook is een hook die gebruikt wordt om formulieren te beheren met React Hook Form.

import {z} from 'zod'
import {useForm} from 'react-hook-form'
import {zodResolver} from '@hookform/resolvers/zod'

// Een Zod schema dat de invoer valideert.
const zodSchema = z.object({
  example: z.string()
})

const Component: FunctionComponent = () => {
  const {
      // Een functie die de inputnaam als argument neemt
      // en de nodige properties toevoegt aan een input element.
      register,
      // Een functie die de invoer controleert en als 
      // alles correct is een functie die de data verwerkt.
      handleSubmit,
      // Een functie die het formulier terugdraait naar
      // de defaultValues.
      reset,
      // Een object dat gebruikt kan worden om de formulierwaarden 
      // aan te passen.
      values,
      // Een object dat aan andere hooks doorgegeven moet worden. 
      control,
      // Informatie over het formulier, zoals de defaultwaarden, de 
      // validatieerrors, de gevalideerde velden, ...
      formState,
  } = useForm<z.infer<typeof zodSchema>>({
      defaulValues: {example: ''},
      resolver: zodResolver(zodSchema)
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register('example')} />
      <button type="submit">Submit</button>
    </form>
  );
};