Skip to content

FormProvider

A component to provide React Context

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.

NameTypeDescription
...propsObjectFormProvider requires all useForm methods.

Rules

  • Avoid using nested FormProvider

Examples

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);

  return (
    <FormProvider {...methods} > // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

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