> For the complete documentation index, see [llms.txt](https://codekyz0111.gitbook.io/today-i-learned/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codekyz0111.gitbook.io/today-i-learned/2022/react/react-hook-form.md).

# React hook form

[공식문서](https://react-hook-form.com/get-started)

## Example

```
import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  // TS는 Form data interface를 작성해야함

  const onSubmit = 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>
  );
}
```