Skip to main content
Deno 2 is finally here 🎉️
Learn more
Module

x/netzo/deps/react-hook-form.ts>useWatch

Full-stack Deno framework for building business web apps like internal tools, dashboards, admin panels and automated workflows.
Go to Latest
function useWatch
import { useWatch } from "https://deno.land/x/netzo@0.4.72/deps/react-hook-form.ts";

Subscribe to the entire form values change and re-render at the hook level.

Examples

Example 1

const { watch } = useForm();
const values = useWatch({
  control,
  defaultValue: {
    name: "data"
  },
  exact: false,
})

Type Parameters

optional
TFieldValues extends FieldValues = FieldValues

Parameters

props: { defaultValue?: DeepPartialSkipArrayKey<TFieldValues>; control?: Control<TFieldValues>; disabled?: boolean; exact?: boolean; }
  • defaultValue, disable subscription and match exact name.

Custom hook to subscribe to field change and isolate re-rendering at the component level.

Examples

Example 1

const { watch } = useForm();
const values = useWatch({
  control,
  name: "fieldA",
  defaultValue: "default value",
  exact: false,
})

Type Parameters

optional
TFieldValues extends FieldValues = FieldValues
optional
TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>

Parameters

props: { name: TFieldName; defaultValue?: FieldPathValue<TFieldValues, TFieldName>; control?: Control<TFieldValues>; disabled?: boolean; exact?: boolean; }
  • defaultValue, disable subscription and match exact name.

Custom hook to subscribe to field change and isolate re-rendering at the component level.

Examples

Example 1

const { watch } = useForm();
const values = useWatch({
  control,
  name: ["fieldA", "fieldB"],
  defaultValue: {
    fieldA: "data",
    fieldB: "data"
  },
  exact: false,
})

Type Parameters

optional
TFieldValues extends FieldValues = FieldValues
optional
TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[]

Parameters

props: { name: readonly [...TFieldNames]; defaultValue?: DeepPartialSkipArrayKey<TFieldValues>; control?: Control<TFieldValues>; disabled?: boolean; exact?: boolean; }
  • defaultValue, disable subscription and match exact name.

Custom hook to subscribe to field change and isolate re-rendering at the component level.

Examples

Example 1

// can skip passing down the control into useWatch if the form is wrapped with the FormProvider
const values = useWatch()

Type Parameters

optional
TFieldValues extends FieldValues = FieldValues