useHtmlField

React custom hook for connecting an <input> element to form state.

import { useHtmlField } from '@jcoreio/zod-forms'

export function useHtmlField({ field, type, normalizeOnBlur }): UseHtmlFieldProps`

The full method signature extracts the type of the subschema at the given path, and should produce a TS error if the path is invalid, doesn't exist in the schema, or its subschema doesn't accept string | number | bigint | boolean | null | undefined.

Options

• field - a FieldPath. If you cast useHtmlField to TypedUseArrayField or use the useHtmlField returned from createZodForm, path may be a pathstring or path array.
• type - the type attribute for the <input> element
• normalizeOnBlur (optional, defaults to true) - whether to normalize the displayed value on blur

Returns UseHtmlFieldProps

An object containing the following properties. Causes a rerender when any of these properties changes.

• input - HtmlFieldInputProps to pass to an <input> element:
  • name - the name of the field (the pathstring of the field path)
  • type - the type from the options
  • value - the value to display
  • checked - include if type is "checkbox"
  • onChange - the change event handler
  • onFocus - the focus event handler
  • onBlur - the blur event handler
• meta - the UseFieldProps for the field