Skip to content
♥

createFormControl

Create form state and ready to be subscribed (BETA)

This function create the entire form state subscription and allow you to subscribe update with or without react component.

Props

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

NameTypeDescription
...propsObjectUseFormProps
NOTES
  • This function is published at v7.55.0-next.1 - This function is completely optional, you can consider to use this instead of useFormContext API. - You may find it useful if you would like to subscribe formsState by skipping react re-render.

Examples:

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


function App() {
  const { register, handleSubmit } = 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
  })
}
const { formControl } = createFormControl(props)


formControl.subscribe({
  formState: { isDirty: true },
  callback: (formState) => {
    if (formState.isDirty) {
      // do something here
    }
  },
})


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


  return <form />
}

Thank you for your support

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