`FormProvider`

FormProvider is a context provider that allows you to access the FormApi via context. It's can also be used to scope sections of the form that use context.

If you're using ValidatedForm, you don't need to use this, at the top of your form.

If you're using Typescript, you lose a lot of type safety when using the context API

Usage

const MyForm = () => {
  const form = useForm({
    // ...etc
  });

  return (
    <FormProvider scope={form.scope()}>
      <form {...form.getFormProps()}>
        {/* MyInput in this example accesses the form via context */}
        <MyInput name="name" />
      </form>
    </FormProvider>
  );
};

Scoping usage

The scoping docs give examples that pass the FormScope around, but you can also scope using the FormProvider component.

const MyForm = () => {
  const form = useForm({
    // ...etc
  });

  return (
    <form {...form.getFormProps()}>
      <FormProvider scope={form.scope("personA")}>
        <PersonForm />
      </FormProvider>
      <FormProvider scope={form.scope("personB")}>
        <PersonForm />
      </FormProvider>
    </form>
  );
};