GTKX

API Reference / @gtkx/forms / FormProvider

Variable: FormProvider ​

const FormProvider: <TFieldValues, TContext, TTransformedValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => React.JSX.Element

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useFormContext.d.ts:64

A provider component that propagates the useForm methods to all children components via React Context API. To be used with useFormContext.

Type Parameters ​

TFieldValues ​

TFieldValues extends FieldValues

TContext ​

TContext = any

TTransformedValues ​

TTransformedValues = TFieldValues

Parameters ​

{ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, } ​

FormProviderProps<TFieldValues, TContext, TTransformedValues>

Returns ​

React.JSX.Element

Remarks ​

API • Demo

Example ​

tsx
function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

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

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