Skip to content
♥

FormStateSubscribe

Component to subscribe to form state update

</> FormStateSubscribe: Component

A React Hook Form component that provides the same functionality as uesFormState, but in component form. Instead of using the hook inside another component, you can use <FormStateSubscribe /> directly in your JSX to subscribe to and render form state.

Props

NameTypeDescription
controlObjectcontrol object provided by useForm. It's optional if you are using FormProvider.
namestring | string[] Provide a single input name, an array of them, or subscribe to all inputs' formState update.
disabledboolean = falseOption to disable the subscription.
exactboolean = falseThis prop will enable an exact match for input name subscriptions.
renderFunctionSubscribes to form state of specified form field(s) and re-renders its child function whenever the form state changes. This allows you to declaratively consume form state in JSX without manually wiring up state.

Examples:

import { useForm, FormStateSubscribe } from "react-hook-form"


const App = () => {
  const { register, control } = useForm()


  return (
    <div>
      <form>
        <input {...register("foo", { min: 3 })} />
        <input {...register("bar")} />
        {/* re-render only when form state of `foo` changes */}
        <FormStateSubscribe
          control={control}
          name="foo"
          render={({ errors }) => <span>{errors.foo?.message}</span>}
        />
      </form>
    </div>
  )
}

Thank you for your support

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