This component will host context object and allow consuming component to subscribe to context and use useForm props and methods.

Props

This following table applied to FormProvider, useFormContext accepts no argument.

Name	Type	Description
`...props`	Object	`FormProvider` requires all `useForm` methods.

RULES

Avoid using nested FormProvider

Examples:

CodeSandbox ^JS

import React from "react"

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}>
      // pass all methods into the context
      <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")} />
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider to star and support it.