useField
React custom hook for subscribing to the value and validation state of a form field and getting methods to programmatically set the value.
To connect <input>
elements to form state, useHtmlField
is probably more useful;
useField
is better for custom field components that aren't based upon <input>
s.
For array fields, use useArrayField
.
import { useField } from '@jcoreio/zod-forms'
export function useField(path): UseFieldProps`
path
may be a FieldPath
. If you cast to TypedUseField
,
or use the useField
returned by createZodForm
, path
may be
a pathstring or path array.
The full method signature (not shown here) extracts the type of the subschema at the given path, and should produce a TS error if the path is invalid or doesn't exist in the schema.
Returns UseFieldProps
An object containing the following properties. Causes a rerender when any of these properties changes.
value
- the parsed value of the field, orundefined
if invalidrawValue
- the raw value of the fieldinitialValue
- the parsed initial value of the field, orundefined
if invalid/uninitializedrawInitialValue
- the raw initial value of the fielderror
- the validation error message, if anydirty
- whether thevalue
is not equal toinitialValue
pristine
- opposite ofdirty
valid
- whether therawValue
is validinvalid
- oppposite ofvalid
touched
- whether the field has been blurred or the form submittedvisited
- whether the field has been focusedsetMeta
- method to set theFieldMeta
for this fieldsetRawValue
- method to set the raw value for this fieldsetValue
- method to set the value for this field