use-field hook purpose
The use-field hook is a simpler alternative to use-form that can be used to manage the state of a single input without the need to create a form.
forms/use-field
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
use-field input interface
The use-field hook accepts an options object with the following properties: - mode: 'controlled' | 'uncontrolled' (default: controlled) - initialValue: T (required) - initialTouched: boolean (default: false) - initialError: React.ReactNode (default: undefined) - onValueChange: (value: T) => void (default: undefined) - validateOnChange: boolean (default: false) - validateOnBlur: boolean (default: false) - clearErrorOnChange: boolean (default: true) - validate: (value: T) => React.ReactNode | Promise<React.ReactNode> (default: undefined) - type: 'input' | 'checkbox' (default: 'input') - resolveValidationError: (error: unknown) => React.ReactNode (default: undefined)
use-field return type interface
The use-field hook returns an object with the following properties and methods: - getInputProps(): returns props to pass to the input element - getValue(): returns current input value - setValue(value: ValueType): sets the input value to the given value - reset(): resets the field value to initial state, sets touched state to false, sets error to null - validate(): validates the current input value when called, returns Promise<React.ReactNode | void> - isValidating: boolean, set to true when async validate function is called, stays true until promise resolves - error: React.ReactNode, current error message - setError(error: React.ReactNode): sets the error message to the given react node - isTouched(): returns true if the input has been focused at least once - isDirty(): returns true if input value is different from the initial value - resetTouched(): resets the touched state to false - key: number, key that should be added to the input when mode is uncontrolled
use-field validateOnBlur option
To validate the field on blur, set the validateOnBlur option to true when creating the use-field hook.
use-field validateOnChange option
To validate the field on change, set the validateOnChange option to true when creating the use-field hook.
use-field async validation
The validate option accepts both async and sync functions. In both cases, the function must return an error message that will be displayed to the user or null if the value is valid. To keep track of async validation state, use the isValidating property. Async validation can be used with the validateOnBlur option, but it is not recommended with validateOnChange because it will trigger validation on every key press, which may lead to race conditions.
use-field touched and dirty states
To get information about whether the field has been focused at least once, use the isTouched method. To check if the value has been changed from the initial value, use the isDirty method.
use-field clearErrorOnChange option
By default, the error message is cleared when the value changes. To disable this behavior, set the clearErrorOnChange option to false.
use-field uncontrolled mode
In uncontrolled mode, rerenders are minimized and the input value is managed by the input itself. It is useful if you experience performance issues with controlled mode, but in most cases controlled mode is recommended as it always provides up-to-date field information as React state. When using uncontrolled mode, the key returned from the hook should be added to the input element.