API

useForm(Array, Object) returns Object

const {
  fields: [field1, field2, ...more],
  ...helpers
} = useForm(
  [{ ...fieldOptions1 }, { ...fieldOptions2 }, ...moreOptions],
  formOptions,
);

Arguments

useform([...fieldOptionsList], {...formOptionsObject})

The hook, accepts 2 arguments:

• An Array of options to create the fields
• An Object with form specific options

Field Options

Property	Type	Default	Description
name	string		name of the field (required)
value	any	''	initial value, value type depends on the input element type. For example Boolean for checkbox, Array for multiple select, String for text and similar input elements. Note: The value must be initialized with the correct type when using with the non-text input types
transform	callback (newValue, prev) => string		callback for transforming value when the value gets changed. See more details below.
validate	callback ({value, setError, getField}) => boolean|void		callback to validate the field onChange and onSubmit events of the <input /> and <form /> elements. Return 'true' to mark field as valid. See more details below.

Passing transform and validate callbacks

const optionsList = [
  {
    name: "enroll",
    value: false
  },
  {
    name: "email",
    value: "",
    // transform value on change
    transform: value => value.toUpperCase(),
    // validate value on change
    validate: ({ value, setError, getField }) => {
      // updated value of the field
      console.log(value);
      // getting data of another field
      const enroll = getField("enroll");
      // setting error on the email field
      if (enroll.value && !value) {
        setError("Email cannot be blank");
        return false; // validation failed
      }
      return true; // validation passed
    }
  }
];

Form Options

Property	Type	Default	Description
submit	callback ({getValue, getFields, getObject}) => void		called when form is submitted (via form helper submit() or when handleSubmit is triggered)

Check this example to know more about using this callback.

Returned Object

const { fields: [], ...helpers } = useForm();

The useForm hook returns an Object that contains:

• an Array of fields, created in the same order as the field options were passed
• additional helpers to work with the form

Following are the properties of the returned object-

Property	Type	Description
fields	Array	array of fields in the same order the options are passed to the hook. See more details below.
setFieldValue	Function(fieldName:String, value:any)	helper method to set any field value
setFieldError	Function(fieldName:String, error:String)	helper method to set any field error
reset	Function	method to reset all the fields to their initial values
submit	Function	method to manually trigger submit callback of the form options argument passed to the hook
handleSubmit	Function	event handler for <form /> on submit event. See example.
isDirty	Function	flag that indicates at least one of the fields is dirty
isInvalid	Function	flag that indicates at least one of the fields is invalid

Field Object

properties

Following are the properties of each field object returned in the fields array -

Property	Type	Description
name	string	name of the field
value	any	value of the field
initialValue	any	initial value of the field
dirty	boolean	flag to indicate that the value has been changed
error	string	field error set by using setError or setFieldError methods
invalid	boolean	flag to indicate that field has invalid value

Methods

Method	Params	Returns	Description
setValue	name: string, value: any	void	method to set a value of a field
setError	name: string, error: string	void	method to set an error on a field
validate		void	method to manually trigger field validation

Event Handlers

Name	Element	Event	Description
handleChange	<input/>	change	updates field's value, element