React Hook Form

https://react-hook-form.com/docs
Admin
React Hook Form is a performance-oriented form validation library for React applications, providing...
Tokens:67,964
Snippets:525
Trust Score:9.6
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install useLens

Source: https://react-hook-form.com/docs/uselens

Install the useLens package using npm.

```bash
npm install @hookform/lenses
```

--------------------------------

### React Web Form Component Example

Source: https://react-hook-form.com/docs/useform/form

A complete example of using the Form component in a React Web application, including `useForm` setup, `action` prop for submission, and `onSuccess`/`onError` callbacks.

```jsx
import { useForm, Form } from "react-hook-form"


function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm({
    // progressive: true, optional prop for progressive enhancement
  })


  return (
    <div>
      // Use action prop to make post submission with formData
      <Form
        action="/api"
        control={control}
        onSuccess={() => {
          alert("Success")
        }}
        onError={() => {
          alert("error")
        }}
      >
        <input {...register("name")}
        {isSubmitSuccessful && <p>Form submit successful.</p>}
        {errors?.root?.server && <p>Form submit failed.</p>}
        <button>submit</button>
      </Form>
      // Manual form submission
      <Form
        onSubmit={async ({ formData, data, formDataJson, event }) => {
          await fetch("api", {
            method: "post",
            body: formData,
          })
        }}
      >
        <input {...register("test")} /> <button>submit</button>
      </Form>
    </div>
  )
}
```

--------------------------------

### FormProvider Example

Source: https://react-hook-form.com/docs/useformcontext

Example demonstrating how to use FormProvider to wrap the form and useFormContext within nested components.

```APIDOC
```javascript
import { useForm, FormProvider, useFormContext } from "react-hook-form"

export default function App() {
  const methods = useForm()
  const onSubmit = (data) => console.log(data)
  const { register, reset } = methods

  useEffect(() => {
    reset({
      name: "data",
    })
  }, [reset]) // ❌ never put `methods` as the deps

  return (
    <FormProvider {...methods}> 
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input {...register("name")} />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput() {
  const { register } = useFormContext() // retrieve all hook methods
  return <input {...register("test")} />
}
```
```

--------------------------------

### Install ErrorMessage Component

Source: https://react-hook-form.com/docs/useformstate/errormessage

Install the ErrorMessage component using npm.

```bash
npm install @hookform/error-message
```

--------------------------------

### Synchronous Submission Example

Source: https://react-hook-form.com/docs/useform/handlesubmit

Example demonstrating a synchronous form submission using handleSubmit with both success and error handlers.

```APIDOC
## Sync Example

TSJS
CopyCodeSandbox TS
```typescript
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"


type FormValues = {
  firstName: string
  lastName: string
  email: string
}

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

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")}/>
      <input {...register("lastName")}/>
      <input type="email" {...register("email")}/>

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

CopyCodeSandbox JS
```javascript
import { useForm } from "react-hook-form"

export default function App() {
  const { register, handleSubmit } = useForm()
  const onSubmit = (data, e) => console.log(data, e)
  const onError = (errors, e) => console.log(errors, e)

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")}/>
      <input {...register("lastName")}/>
      <button type="submit">Submit</button>
    </form>
  )
}
```
```

--------------------------------

### Field Array Example with useWatch

Source: https://react-hook-form.com/docs/usewatch

An advanced example demonstrating the use of useWatch with a field array to calculate and display a total value based on user input.

```APIDOC
## Field Array Example with useWatch

### Description
This example utilizes `useWatch` within a component (`Calc`) that works with a field array (e.g., 'test'). It calculates a total value from the field array's data and updates a form field ('total') with the result.

### Component: Calc
- **Purpose**: Calculates and displays a total based on field array data.
- **Props**: `control` (Control object), `setValue` (function to update form values).
- **Hook Usage**: `useWatch({ control, name: "test" })` to get the field array data.
- **Calculation**: The `totalCal` function recursively sums up numeric values within the nested field array structure.
- **Side Effect**: `setValue("total", output)` updates the form with the calculated total.
- **Rendering**: Displays the calculated total.
```

--------------------------------

### Basic Form with useWatch

Source: https://react-hook-form.com/docs/usewatch

A basic form example demonstrating how to use useWatch to display the value of the 'firstName' field in real-time.

```APIDOC
## Basic Form with useWatch

### Description
This example shows a form with input fields for 'firstName' and 'lastName'. The `FirstNameWatched` component uses `useWatch` to display the current value of 'firstName' as it changes.

### Components
#### FirstNameWatched
- **Purpose**: Displays the watched value of 'firstName'.
- **Props**: `control` (Control object from useForm).
- **Hook Usage**: `useWatch({ control, name: "firstName" })`.

#### App
- **Purpose**: Main form component.
- **Hooks**: `useForm` for form management, `register` for input binding, `handleSubmit` for form submission.
- **Rendering**: Includes input fields and the `FirstNameWatched` component.
```

--------------------------------

### Basic useFieldArray Example

Source: https://react-hook-form.com/docs/usefieldarray

Demonstrates how to use `useFieldArray` to manage a list of input fields. Ensure to include the `key` prop with `field.id` for each rendered input.

```javascript
function FieldArray() {
  const { control, register } = useForm();
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
    control,
    name: "test",
  });


  return (
    <>
      {fields.map((field, index) => (
        <input
          key={field.id}
          {...register(`test.${index}.value`)}
        />
      ))}
    </>
  );
}
```

--------------------------------

### Asynchronous Submission Example

Source: https://react-hook-form.com/docs/useform/handlesubmit

Example showing how to handle asynchronous form submissions with handleSubmit, including error handling within the async function.

```APIDOC
## Async Example

CopyCodeSandbox JS
```javascript
import { useForm } from "react-hook-form"

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = async (data) => {
    await sleep(2000)
    if (data.username === "bill") {
      alert(JSON.stringify(data))
    } else {
      alert("There is an error")
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">User Name</label>
      <input placeholder="Bill" {...register("username")}/>

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

--------------------------------

### Basic Usage Example

Source: https://react-hook-form.com/docs/useform/getvalues

This example demonstrates how to use the `getValues` method to retrieve form input values in a React component using React Hook Form.

```javascript
import { useForm } from "react-hook-form"

function App() {
  const { register, getValues } = useForm()

  return (
    <form>
      <input {...register("test")}
      <input {...register("test1")}

      <button
        type="button"
        onClick={() => {
          const values = getValues() // { test: "test-input", test1: "test1-input" }
          const singleValue = getValues("test") // "test-input"
          const multipleValues = getValues(["test", "test1"])
          // ["test-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  )
}
```

--------------------------------

### Full Example of useFieldArray Form

Source: https://react-hook-form.com/docs/usefieldarray

A complete example demonstrating the use of `useFieldArray` within a form, including appending new fields, removing existing ones, and integrating with `Controller` for complex inputs.

```javascript
import { useForm, useFieldArray } from "react-hook-form"


function App() {
  const { register, control, handleSubmit, reset, trigger, setError } = useForm(
    {
      // defaultValues: {}; you can populate the fields by this attribute
    }
  )
  const { fields, append, remove } = useFieldArray({
    control,
    name: "test",
  })


  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <ul>
        {fields.map((item, index) => (
          <li key={item.id}>
            <input {...register(`test.${index}.firstName`)} />
            <Controller
              render={({ field }) => <input {...field} />}
              name={`test.${index}.lastName`}
              control={control}
            />
            <button type="button" onClick={() => remove(index)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
      <button
        type="button"
        onClick={() => append({ firstName: "bill", lastName: "luo" })}
      >
        append
      </button>
      <input type="submit" />
    </form>
  )
}

```

--------------------------------

### useController Validation Rules Example

Source: https://react-hook-form.com/docs/usecontroller

Define validation rules for an input using the rules prop, similar to how you would with register. This example shows how to make a field required.

```javascript
rules={{
  required: true
}}
```

--------------------------------

### Example: Displaying field state

Source: https://react-hook-form.com/docs/useform/getfieldstate

This example demonstrates how to use getFieldState within a component to display the dirty and touched status of an input field.

```javascript
import * as React from "react"
import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    getFieldState,
    formState: { isDirty, isValid },
  } = useForm({
    mode: "onChange",
    defaultValues: {
      firstName: "",
    },
  })

  // you can invoke before render or within the render function
  const fieldState = getFieldState("firstName")

  return (
    <form>
      <input {...register("firstName", { required: true })} />{" "}
      <p>{getFieldState("firstName").isDirty && "dirty"}</p>{" "}
      <p>{getFieldState("firstName").isTouched && "touched"}</p>
      <button
        type="button"
        onClick={() => console.log(getFieldState("firstName"))}
      >
        field state
      </button>
    </form>
  )
}
```

--------------------------------

### React Native Form Component Example

Source: https://react-hook-form.com/docs/useform/form

An example demonstrating the Form component's usage in a React Native application, utilizing the `render` prop for custom UI and submission triggers.

```jsx
import { useForm, Form } from "react-hook-form"
function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm()
  return (
    <Form
      action="/api"
      control={control}
      render={({ submit }) => {
        ;<View>
          {isSubmitSuccessful && <Text>Form submit successful.</Text>}


          {errors?.root?.server && <Text>Form submit failed.</Text>}
          <Button onPress={() => submit()} />
        </View>
      }}
    />
  )
}
```

--------------------------------

### Example: Using useFormContext in nested components

Source: https://react-hook-form.com/docs/useformcontext

Demonstrates how to use FormProvider to make useForm methods available to nested components via useFormContext. Includes resetting form values.

```javascript
import {
  useForm,
  FormProvider,
  useFormContext,
} from "react-hook-form"

export default function App() {
  const methods = useForm()
  const onSubmit = (data) => console.log(data)
  const { register, reset } = methods

  useEffect(() => {
    reset({
      name: "data",
    })
  }, [reset]) // ❌ never put `methods` as the deps

  return (
    <FormProvider {...methods}> 
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input {...register("name")} />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput() {
  const { register } = useFormContext() // retrieve all hook methods
  return <input {...register("test")} />
}
```

--------------------------------

### Setting Server Errors

Source: https://react-hook-form.com/docs/useform/seterror

This example shows how to use `setError` to report server-side errors, often associated with the entire form or a specific root error key.

```APIDOC
## setError(rootErrorKey, error)

### Description
This demonstrates setting a server error, typically under the 'root' key, to indicate issues originating from the server response. This is useful for displaying general API errors or specific status code related messages.

### Method Signature
`setError(rootErrorKey: 'root.serverError', error: { type: string | number, message?: string })`

### Parameters
#### `rootErrorKey` (string) - Required
Typically set to `'root.serverError'` to denote a server-related error at the form's root level.

#### `error` (object) - Required
An object containing the error details.
  - **`type`** (string | number) - Required - The status code or type of the server error.
  - **`message`** (string) - Optional - A message describing the server error.

### Example Usage
```javascript
import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, handleSubmit, setError, formState: { errors } } = useForm();

  const onSubmit = async (data) => {
    // Assume fetch returns a response object with a statusCode
    const response = await fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) });
    
    if (response.statusCode !== 200) {
      setError('root.serverError', {
        type: response.statusCode,
        message: 'Failed to submit form due to server error.',
      });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fieldName')} />
      {errors.root && errors.root.serverError && (
        <p>Server Error: {errors.root.serverError.message} (Status: {errors.root.serverError.type})</p>
      )}
      <button type="submit">Submit</button>
    </form>
  );
};
```
```

--------------------------------

### Nested and Flat Input Values Example

Source: https://react-hook-form.com/docs/useform/getvalues

Illustrates how `getValues` handles both flat and nested input structures, including accessing values within nested objects and arrays.

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

// Flat input values
type Inputs = {
  key1: string
  key2: number
  key3: boolean
  key4: Date
}

function App() {
  const { register, getValues } = useForm<Inputs>()

  getValues()

  return <form />
}

// Nested input values
type Inputs1 = {
  key1: string
  key2: number
  key3: {
    key1: number
    key2: boolean
  }
  key4: string[]
}

function Form() {
  const { register, getValues } = useForm<Inputs1>()

  getValues()
  // function getValues(): Record<string, unknown>
  getValues("key1")
  // function getValues<"key1", unknown>(payload: "key1"): string
  getValues("key2")
  // function getValues<"key2", unknown>(payload: "key2"): number
  getValues("key3.key1")
  // function getValues<"key3.key1", unknown>(payload: "key3.key1"): unknown
  getValues<string, number>("key3.key1")
  // function getValues<string, number>(payload: string): number
  getValues<string, boolean>("key3.key2")
  // function getValues<string, boolean>(payload: string): boolean
  getValues("key4")
  // function getValues<"key4", unknown>(payload: "key4"): string[]

  return <form />
}
```

--------------------------------

### Example Usage of useFieldArray

Source: https://react-hook-form.com/docs/usefieldarray

Demonstrates how to use the useFieldArray hook within a React component to manage a dynamic list of input fields.

```APIDOC
## Example

```jsx
function FieldArray() {
  const { control, register } = useForm();
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
    control,
    name: "test", // unique name for your Field Array
  });

  return (
    <>
      {fields.map((field, index) => (
        <input
          key={field.id} // important to include key with field's id
          {...register(`test.${index}.value`)}
        />
      ))}
      <button type="button" onClick={() => append({ value: "default" })}>
        append
      </button>
    </>
  );
}
```
```

--------------------------------

### Registering Controlled Inputs with Controller (JavaScript)

Source: https://react-hook-form.com/docs/useform/control

This JavaScript example demonstrates how to use the control object with the Controller component for managing controlled inputs.

```javascript
import { useForm, Controller } from "react-hook-form"


function App() {
  const { control } = useForm()


  return (
    <Controller
      render={({ field }) => <input {...field} />}
      name="firstName"
      control={control}
      defaultValue=""
    />
  )
}

```

--------------------------------

### Async Submit Handler with Delay

Source: https://react-hook-form.com/docs/useform/handlesubmit

This example demonstrates an asynchronous submit handler that includes a delay. It simulates an async operation and provides conditional feedback based on the username.

```javascript
import { useForm } from "react-hook-form"


const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))


function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = async (data) => {
    await sleep(2000)
    if (data.username === "bill") {
      alert(JSON.stringify(data))
    } else {
      alert("There is an error")
    }
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">User Name</label>
      <input placeholder="Bill" {...register("username")} />


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

--------------------------------

### Watch Field Array Values (JavaScript)

Source: https://react-hook-form.com/docs/useform/watch

This example demonstrates how to use `watch` to monitor changes within a field array. It logs the entire 'test' field array whenever any of its values change.

```javascript
import * as React from "react"
import {
  useForm,
  useFieldArray
} from "react-hook-form"


function App() {
  const { register, control, handleSubmit, watch } = useForm()
  const { fields, remove, append } = useFieldArray({
    name: "test",
    control,
  })
  const onSubmit = (data) => console.log(data)


  console.log(watch("test"))


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => {
        return (
          <div key={field.id}>
            <input
              defaultValue={field.firstName}
              {...register(`test.${index}.firstName`)}
            />
            <input
              defaultValue={field.lastName}
              {...register(`test.${index}.lastName`)}
            />
            <button type="button" onClick={() => remove(index)}>
              Remove
            </button>
          </div>
        )
      })}
      <button
        type="button"
        onClick={() =>
          append({
            firstName: "bill" + renderCount,
            lastName: "luo" + renderCount,
          })
        }
      >
        Append
      </button>
    </form>
  )
}
```

--------------------------------

### Sync Submit Handler with JavaScript

Source: https://react-hook-form.com/docs/useform/handlesubmit

This example shows a synchronous submit handler in plain JavaScript. It logs the form data and errors to the console.

```javascript
import { useForm } from "react-hook-form"


export default function App() {
  const { register, handleSubmit } = useForm()
  const onSubmit = (data, e) => console.log(data, e)
  const onError = (errors, e) => console.log(errors, e)


  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  )
}
```

--------------------------------

### Watching a Specific Field with useWatch (JavaScript)

Source: https://react-hook-form.com/docs/usewatch

A JavaScript example demonstrating how to use useWatch to track changes in the 'firstName' field. It utilizes default values and shows the watched value in a child component.

```javascript
import { useForm, useWatch } from "react-hook-form"


function Child({ control }) {
  const firstName = useWatch({
    control,
    name: "firstName",
  })


  return <p>Watch: {firstName}</p>
}


function App() {
  const { register, control } = useForm({
    defaultValues: {
      firstName: "test",
    },
  })


  return (
    <form>
      <input {...register("firstName")} />
      <Child control={control} />
    </form>
  )
}
```

--------------------------------

### Handling Input Change with useController (JS)

Source: https://react-hook-form.com/docs/usecontroller

Example of handling input changes for a controlled component, parsing the value to an integer before sending it to react-hook-form.

```javascript
const { field } = useController();
const [value, setValue] = useState(field.value);


onChange={(event) => {
  field.onChange(parseInt(event.target.value)) // data send back to hook form
  setValue(event.target.value) // UI state
}}

```

--------------------------------

### Register Input or Select

Source: https://react-hook-form.com/docs/useform/register

This example demonstrates how to register various input types including text, select, checkboxes, and radio buttons with react-hook-form.

```javascript
import { useForm } from "react-hook-form"


export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      category: "",
      checkbox: [],
      radio: "",
    },
  })


  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register("firstName", { required: true })}
        placeholder="First name"
      />


      <input
        {...register("lastName", { minLength: 2 })}
        placeholder="Last name"
      />


      <select {...register("category")}>
        <option value="">Select...</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>


      <input {...register("checkbox")} type="checkbox" value="A" />
      <input {...register("checkbox")} type="checkbox" value="B" />
      <input {...register("checkbox")} type="checkbox" value="C" />


      <input {...register("radio")} type="radio" value="A" />
      <input {...register("radio")} type="radio" value="B" />
      <input {...register("radio")} type="radio" value="C" />


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

--------------------------------

### Calculating Total with useWatch and Field Array

Source: https://react-hook-form.com/docs/usewatch

This example shows how to use useWatch to monitor changes in a field array ('test') and calculate a total value. It includes a helper function 'totalCal' and updates a form field with the calculated total.

```javascript
import { useWatch } from "react-hook-form"


function totalCal(results) {
  let totalValue = 0


  for (const key in results) {
    for (const value in results[key]) {
      if (typeof results[key][value] === "string") {
        const output = parseInt(results[key][value], 10)
        totalValue = totalValue + (Number.isNaN(output) ? 0 : output)
      } else {
        totalValue = totalValue + totalCal(results[key][value], totalValue)
      }
    }
  }


  return totalValue
}


export const Calc = ({ control, setValue }) => {
  const results = useWatch({ control, name: "test" })
  const output = totalCal(results)


  // isolated re-render to calc the result with Field Array
  console.log(results)


  setValue("total", output)


  return <p>{output}</p>
}
```

--------------------------------

### Create Form Control Instance

Source: https://react-hook-form.com/docs/createFormControl

Instantiate createFormControl to get form state control and registration methods. This allows direct use of methods like register without needing a FormProvider.

```javascript
const props = createFormControl()

<FormProvider {...props} /> // ❌ You don't need provider

<input {...props.register('name')} /> // ✅ Direct use method from createFormControl
```

--------------------------------

### Tight Coupling with useFormContext

Source: https://react-hook-form.com/docs/uselens

Shows how `useFormContext` creates tight coupling in reusable components, making them less portable. The example demonstrates a component locked to a specific form schema (`UserForm`) and fixed field paths.

```typescript
// ❌ Tightly coupled to parent form structure
function AddressForm() {
  const { control } = useFormContext<UserForm>() // Locked to UserForm type

  return (
    <div>
      <input {...control.register("address.street")} />{" "} 
      <input {...control.register("address.city")}
      />
    </div>
  )
}
// Can't reuse this component with different form schemas

```

--------------------------------

### Setup createFormControl with Options and Use in Components

Source: https://react-hook-form.com/docs/createFormControl

Initialize createFormControl with options like mode and defaultValues. The returned formControl object can be passed to useForm within components, and other hooks like useFormState and Controller can directly use the control object without context.

```javascript
const { formControl, control, handleSubmit, register } = createFormControl({
  mode: 'onChange',
  defaultValues: {
    firstName: 'Bill'
  }
})


function App() {
  useForm({
    formControl,
  })


  return (
    <form onSubmit={handleSubmit(data => console.log)}>
      <input {...register('name')} />
      <FormState />
      <Controller />
    </form>
  );
}


function FormState() {
  useFormState({
    control // no longer need context api
  })
}


function Controller() {
  useFormState({
    control // no longer need context api
  })
}
```

--------------------------------

### Sync Submit Handler with TypeScript

Source: https://react-hook-form.com/docs/useform/handlesubmit

This example demonstrates a synchronous submit handler using TypeScript. It defines form values and uses `SubmitHandler` and `SubmitErrorHandler` for type safety.

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


type FormValues = {
  firstName: string
  lastName: string
  email: string
}


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


  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />


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

--------------------------------

### Watch Field Array Values (TypeScript)

Source: https://react-hook-form.com/docs/useform/watch

This example demonstrates how to use `watch` to monitor changes within a field array. It logs the entire 'test' field array whenever any of its values change.

```typescript
import * as React from "react"
import {
  useForm,
  useFieldArray
} from "react-hook-form"


type FormValues = {
  test: {
    firstName: string
    lastName: string
  }[]
}


function App() {
  const { register, control, handleSubmit, watch } = useForm<FormValues>()
  const { fields, remove, append } = useFieldArray({
    name: "test",
    control,
  })
  const onSubmit = (data: FormValues) => console.log(data)


  console.log(watch("test"))


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => {
        return (
          <div key={field.id}>
            <input
              defaultValue={field.firstName}
              {...register(`test.${index}.firstName`)}
            />
            <input
              defaultValue={field.lastName}
              {...register(`test.${index}.lastName`)}
            />
            <button type="button" onClick={() => remove(index)}>
              Remove
            </button>
          </div>
        )
      })}
      <button
        type="button"
        onClick={() =>
          append({
            firstName: "bill" + renderCount,
            lastName: "luo" + renderCount,
          })
        }
      >
        Append
      </button>
    </form>
  )
}
```

--------------------------------

### Correct use of useController with Input Element (JS)

Source: https://react-hook-form.com/docs/usecontroller

Demonstrates the correct way to spread the field props from useController onto an input element. Avoids double registration by not using register simultaneously.

```javascript
const { field } = useController({ name: 'test' })


<input {...field} /> // ✅
<input {...field} {...register('test')} /> // ❌ double up the registration

```

--------------------------------

### Enabling Subscription by Deconstructing useFormState

Source: https://react-hook-form.com/docs/useformstate

Illustrates the correct way to use useFormState by deconstructing the returned formState object to enable state subscriptions. Reading the entire formState object without deconstruction will not trigger subscriptions.

```javascript
const { isDirty } = useFormState() // ✅
const formState = useFormState() // ❌ should deconstruct the formState
```

--------------------------------

### Function Memoization for Lens Caching

Source: https://react-hook-form.com/docs/uselens

Demonstrates the correct way to use functions with methods like `reflect` to maintain caching benefits. It shows an incorrect approach that breaks the cache and the correct memoized version.

```javascript
// ❌ Creates a new function on every render, breaking the cache
lens.reflect((l) => l.focus("firstName"))

// ✅ Memoized function preserves the cache
lens.reflect(useCallback((l) => l.focus("firstName"), []))

```

--------------------------------

### Prepend and Append with useFieldArray

Source: https://react-hook-form.com/docs/usefieldarray

Shows how to dynamically add new fields to the beginning (prepend) or end (append) of a field array. Supports focus management and setting initial values.

```javascript
import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';


const App = () => {
  const { register, control } = useForm({
    defaultValues: {
      test: [{ value: '1' }, { value: '2' }],
    },
  });
  const { fields, prepend, append } = useFieldArray({
    name: 'test',
    control,
  });


  return (
    <form>
      {fields.map((field, i) => (
        <input key={field.id} {...register(`test.${i}.value` as const)} />
      ))}
      <button
        type="button"
        onClick={() => prepend({ value: '' }, { focusIndex: 1 })}
      >
        prepend
      </button>
      <button
        type="button"
        onClick={() => append({ value: '' }, { focusName: 'test.0.value' })}
      >
        append
      </button>
    </form>
  );
};


```

--------------------------------

### Setting Field Errors

Source: https://react-hook-form.com/docs/useform/seterror

This example demonstrates how to use `setError` to manually set errors for a specific field, like 'lastName', with custom error types and messages.

```APIDOC
## setError(fieldName, error)

### Description
Allows you to manually set an error for a specific form field. This is useful for validating fields that cannot be handled by standard HTML5 validation or for integrating with server-side validation.

### Method Signature
`setError(fieldName: string, error: { type: string, message?: string, types?: Record<string, any> })`

### Parameters
#### `fieldName` (string) - Required
The name of the field for which to set the error.

#### `error` (object) - Required
An object containing the error details.
  - **`type`** (string) - Required - A unique identifier for the error type (e.g., 'required', 'minLength', 'custom').
  - **`message`** (string) - Optional - A user-friendly message for the error.
  - **`types`** (Record<string, any>) - Optional - An object to store multiple error types for a single field, useful for complex validation scenarios.

### Example Usage
```javascript
import { useForm } from 'react-hook-form';

const MyForm = () => {
  const { register, setError, formState: { errors } } = useForm();

  React.useEffect(() => {
    // Setting a 'required' error for 'lastName'
    setError('lastName', {
      types: {
        required: 'This field is required',
        minLength: 'Minimum length not met',
      }
    });
  }, [setError]);

  return (
    <form>
      <input {...register('lastName')} />
      {errors.lastName && errors.lastName.types && (
        <p>{errors.lastName.types.required}</p>
      )}
    </form>
  );
};
```
```

--------------------------------

### Controller with Value Transformation

Source: https://react-hook-form.com/docs/usecontroller/controller

Customize the value sent to React Hook Form by transforming it within the onChange handler. This example sends an integer instead of a string.

```jsx
<Controller
  name="test"
  render={({ field }) => {
    // sending integer instead of string.
    return (
      <input
        {...field}
        onChange={(e) => field.onChange(parseInt(e.target.value))}
      />
    )
  }}
/>
```

--------------------------------

### React Hook Form Interop: Object Return

Source: https://react-hook-form.com/docs/uselens

Call `interop()` without arguments to get `control` and `name` for React Hook Form's `register`.

```javascript
const { control, name } = lens.interop()

return <input {...control.register(name)} />
```

--------------------------------

### Ensuring Form Initialization with isReady

Source: https://react-hook-form.com/docs/useform/formstate

Illustrates how to use the `isReady` flag from `formState` to ensure that form state updates, especially from child components, occur only after the form has been fully initialized.

```APIDOC
const { setValue, formState: { isReady }} = useForm();

// Parent component:
// ✅ useEffect(() => setValue('test', 'data'), []) 

// Children component:
// ✅ useEffect(() => isReady && setValue('test', 'data'), [isReady])
```

--------------------------------

### Get individual field state

Source: https://react-hook-form.com/docs/useform/getfieldstate

Call getFieldState with the field name to retrieve its state. If the field is not registered, it returns default false values and undefined for errors.

```javascript
getFieldState("test")
getFieldState("test") // ✅ register input and return field state
getFieldState("non-existent-name") // ❌ will return state as false and error as undefined
```

--------------------------------

### Custom Async Validation

Source: https://react-hook-form.com/docs/useform/register

Implement custom asynchronous validation for an input field. This example shows how to validate a product based on a selected category using an external service.

```javascript
import { useForm } from "react-hook-form"
import { checkProduct } from "./service"


export default function App() {
  const { register, handleSubmit } = useForm()


  return (
    <form onSubmit={handleSubmit(console.log)}>
      <select
        {...register("category", {
          required: true,
        })}
      >
        <option value="">Select...</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>


      <input
        type="text"
        {...register("product", {
          validate: {
            checkAvailability: async (product, { category }) => {
              if (!category) return "Choose a category"
              if (!product) return "Specify your product"
              const isInStock = await checkProduct(category, product)
              return isInStock || "There is no such product"
            },
          },
        })}
      />


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

--------------------------------

### Uncontrolled Form Reset Example

Source: https://react-hook-form.com/docs/useform/reset

Demonstrates how to reset form values and errors in an uncontrolled form. The `reset()` function is called on button click to clear all fields and errors.

```typescript
import {
  useForm
} from "react-hook-form"


interface UseFormInputs {
  firstName: string
  lastName: string
}


export default function Form() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<UseFormInputs>()
  const onSubmit = (data: UseFormInputs) => {
    console.log(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First name</label>
      <input {...register("firstName", { required: true }) } />


      <label>Last name</label>
      <input {...register("lastName")}
      />


      <input type="submit" />
      <input type="reset" value="Standard Reset Field Values" />
      <input
        type="button"
        onClick={() => reset()}
        value="Custom Reset Field Values & Errors"
      />
    </form>
  )
}
```

--------------------------------

### Ensuring form readiness before state updates

Source: https://react-hook-form.com/docs/useform/formstate

Use the `isReady` flag to ensure the form's state subscription is set up before attempting to update state from child components. This prevents potential issues when methods like `setValue` are called before initialization.

```javascript
const { setValue, formState: { isReady }} = useForm();
// Parent component: ✅ useEffect(() => setValue('test', 'data'), []) 
// Children component: ✅ useEffect(() => isReady && setValue('test', 'data'), [isReady])
```

--------------------------------

### Basic Controller Usage

Source: https://react-hook-form.com/docs/usecontroller/controller

Use Controller to integrate external controlled components. Ensure you do not register the input again, as Controller handles the registration process.

```jsx
<Controller
  name="test"
  render={({ field }) => {
    // return <input {...field} {...register('test')} />; ❌ double up the registration
    return <input {...field} /> // ✅
  }}
/>
```

--------------------------------

### Manually Create Lens with LensCore

Source: https://react-hook-form.com/docs/uselens

Use LensCore directly for advanced control when the useLens hook is insufficient. Requires importing LensCore and LensesStorage.

```typescript
import {
  useMemo
} from "react"
import {
  useForm
} from "react-hook-form"
import {
  LensCore,
  LensesStorage
} from "@hookform/lenses"


function App() {
  const { control } = useForm<{ firstName: string; lastName: string }>()


  const lens = useMemo(() => {
    const cache = new LensesStorage(control)
    return LensCore.create(control, cache)
  }, [control])


  return (
    <div>
      <input
        {...lens
          .focus("firstName")
          .interop((ctrl, name) => ctrl.register(name))}
      />
      <input
        {...lens.focus("lastName").interop((ctrl, name) => ctrl.register(name))}
      />
    </div>
  )
}
```

--------------------------------

### Registering Controlled Inputs with Controller (TypeScript)

Source: https://react-hook-form.com/docs/useform/control

Use the control object with the Controller component to register and manage controlled inputs. This example shows integration with Material-UI's TextField.

```typescript
import { useForm, Controller } from "react-hook-form"
import { TextField } from "@material-ui/core"


type FormInputs = {
  firstName: string
}

function App() {
  const { control, handleSubmit } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => console.log(data)


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        render={({ field }) => <input {...field} />}
        name="firstName"
        control={control}
        defaultValue=""
      />

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

```

--------------------------------

### Integrating Form with handleSubmit

Source: https://react-hook-form.com/docs/useform/form

Shows how to integrate the Form component with `handleSubmit` from `useForm` for data preparation before submission.

```jsx
const { handleSubmit, control } = useForm();
const onSubmit =(data) => callback(prepareData(data))
<form onSubmit={handleSubmit(onSubmit)} />
// or
<Form
  onSubmit={({ data }) => {
    console.log(data)
  }}
/>
```

--------------------------------

### Manually Setting a Single Field Error

Source: https://react-hook-form.com/docs/useform/seterror

This example demonstrates how to use `setError` within a `useEffect` hook to manually set an error on the 'username' field. The error message is displayed below the input if it exists.

```typescript
import * as React from "react"
import { useForm } from "react-hook-form"


type FormInputs = {
  username: string
}


const App = () => {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<FormInputs>()
  const onSubmit = (data: FormInputs) => {
    console.log(data)
  }


  React.useEffect(() => {
    setError("username", {
      type: "manual",
      message: "Dont Forget Your Username Should Be Cool!",
    })
  }, [setError])


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      {errors.username && <p>{errors.username.message}</p>}


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

--------------------------------

### Basic Usage of setValue

Source: https://react-hook-form.com/docs/useform/setvalue

Demonstrates how to use `setValue` to update a form field's value and how to apply options like `shouldValidate` and `shouldDirty`.

```javascript
import { useForm } from "react-hook-form"

const App = () => {
  const { register, setValue } = useForm({
    defaultValues: {
      firstName: "",
    },
  })

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <button onClick={() => setValue("firstName", "Bill")}>Set Value</button>
      <button
        onClick={() =>
          setValue("firstName", "Luo", {
            shouldValidate: true,
            shouldDirty: true,
          })
        }
      >
        Set Value with Options
      </button>
    </form>
  )
}

```

--------------------------------

### Basic Form Component with Lenses

Source: https://react-hook-form.com/docs/uselens

Demonstrates a form component using `useForm` and `useLens` to manage nested data structures and arrays. It shows how to integrate lenses with `useFieldArray` for dynamic lists.

```typescript
import {
  useForm,
  Control,
  Path,
  useFormContext,
} from "react-hook-form"
import {
  Lens,
  useLens,
  FieldArrayPath,
  FieldPath,
} from "@hookform/lenses"
import {
  useFieldArray as useRhfFieldArray,
} from "@hookform/lenses/rhf"

// Mock types for demonstration
type UserForm = {
  firstName: string
  lastName: string
  address: {
    street: string
    city: string
  }
  children: {
    name: string
    surname: string
  }[]
}

function FormComponent() {
  const { handleSubmit, control } = useForm<UserForm>({})

  const lens = useLens({ control })

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <PersonForm
        lens={lens.reflect(({ firstName, lastName }) => ({ // Using reflect for derived state
          name: firstName,
          surname: lastName,
        }))}
      />
      <ChildForm lens={lens.focus("children")} /> {/* Focusing on an array field */}
      <input type="submit" />
    </form>
  )
}

function ChildForm({
  lens,
}: { lens: Lens<UserForm["children"]> }) {
  // Using the RHF interop for useFieldArray
  const { fields, append } = useRhfFieldArray(lens.interop())

  return (
    <>
      <button type="button" onClick={() => append({ name: "", surname: "" }) }>
        Add child
      </button>
      {/* Mapping over the array using lens.map */}
      {lens.map(fields, (value, l) => (
        <PersonForm key={value.id} lens={l} />
      ))}
    </>
  )
}

// PersonForm is used twice with different sources
function PersonForm({
  lens,
}: { lens: Lens<{ name: string; surname: string }> }) {
  return (
    <div>
      <StringInput lens={lens.focus("name")} />
      <StringInput lens={lens.focus("surname")} />
    </div>
  )
}

function StringInput({ lens }: { lens: Lens<string> }) {
  // Using interop to connect lens to RHF's register
  return <input {...lens.interop((ctrl, name) => ctrl.register(name))} />
}

```

--------------------------------

### Watching a Specific Field with useWatch (TypeScript)

Source: https://react-hook-form.com/docs/usewatch

Example of using useWatch to watch a single field ('firstName') in a form. It includes setting a default value and demonstrates how the component re-renders only when the watched field changes.

```typescript
import { useForm, useWatch } from "react-hook-form"


interface FormInputs {
  firstName: string
  lastName: string
}


function FirstNameWatched({ control }: { control: Control<FormInputs> }) {
  const firstName = useWatch({
    control,
    name: "firstName", // without supply name will watch the entire form, or ['firstName', 'lastName'] to watch both
    defaultValue: "default", // default value before the render
  })


  return <p>Watch: {firstName}</p> // only re-render at the custom hook level, when firstName changes
}


function App() {
  const { register, control, handleSubmit } = useForm<FormInputs>()


  const onSubmit = (data: FormInputs) => {
    console.log(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name:</label>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />


      <FirstNameWatched control={control} />
    </form>
  )
}
```
Tokens:
Raw