heokhe / use-form-control

React hook for controlling and validating inputs.

use-form-control

React hook for controlling and validating inputs.

Usage

The hook takes a "validator":

type Validator = RegExp | ((value: string) => boolean);

And returns two things: a ref, and a object containing multiple things:

name	type	description
input	T	The form control element (ref.current).
value	string	The value of the input.
isValid	boolean	True if the value matches the given validator.
hasError	boolean	True if there's an error.
additionalError	string?	Any external error, such as the result of a server-side validation. You can display this string as a message near your form control.
setAdditionalError	(error: string) => void	Sets an additionalError.
focus	() => void	Equivalent to input.focus().

You should attach the ref to your form control, and you're good to go.

Example

See This CodeSandbox.