React Use Form

Small Reactjs hook to manage forms and forms controls.

Getting Started

npm install react-use-form-control

Requires react@^16.13.1 as a peer dependency.

Basic Usage

Basic usage

Here's an example of basic usage: input[name=] is required, without the input property name is hard to identify the control on input event

import React from  "react";
import  { useForm }  from  "react-use-form-control";
const controls =  {
	task:  {
		value:  "",
	},
	assignto:  {
		value:  "",
	},
};

const  Todo  =  ()  =>  {
	const  { form, handleControlEvent }  =  useForm(controls);

	return (
	<div  className={"todo-list-main"}>
		<form>
			<input
				name="task" // should be unique
				placeholder="Task"
				value={form.controls.task.value}
				onChange={handleControlEvent}
			/>

			<input
				name="assignto"
				placeholder="Assign To"
				value={form.controls.assignto.value}
				onChange={handleControlEvent}
			/>
			<button  className="primary"  type="button">Save</button>
		</form>
	</div>);
};

export  default Todo;

Using validators

This example apply a validation function (type ValidatorFunction = (value: any) => boolean). This validation function will be executed always the control changes.

The validators property is an array of validators functions, so you can define many validation function as you require.

import React from  "react";
import  { useForm }  from  "react-use-form-control";

const  isRequired  =  (value)  =>  {
	return value;
};

const controls =  {
	task:  {
		value:  "",
		validators: [{
			validatorfunction: isRequired,
			errorMessage:  "Name is required",
		}],
	},
	assignto:  {
		value:  "",
		validators: [{
			validatorfunction: isRequired,
			errorMessage:  "Assing to is required",
		}],
	},
};

const  Todo  =  ()  =>  {
const  { form, handleControlEvent }  =  useForm(controls);

return (
	<div  className={"todo-list-main"}>
		<form>
			{Object.keys(form.controls).map((key) =>
				form.controls[key].error && (
				<span  className={"error-message"}>
					{form.controls[key].errorMessage}
				</span>
				)
			)}
			<input
				name="task"
				placeholder="Task"
				value={form.controls.task.value}
				onChange={handleControlEvent}
			/>
			<input
				name="assignto"
				placeholder="Assign To"
				value={form.controls.assignto.value}
				onChange={handleControlEvent}
			/>
			<button  className="primary"  type="button"  disabled={!form.valid}>
				Save
			</button>
		</form>
	</div>);
};

export  default Todo;

Dependencies between controls

Many times we have dependencies between controls and we need apply validations based on that.

import React from  "react";
import  { useForm }  from  "react-use-form-control";

const  isRequired  =  (value)  =>  {
	return value;
};
const  lunchOnlyForJohn=  function(value)  {
	return  this.task.value ===  'Lunch'  && value ===  'John Smith';
}

const controls =  {
	task:  {
		value:  "",
		validators: [{
			validatorfunction: isRequired,
			errorMessage:  "Name is required",
		}],
	},
	assignto:  {
		value:  "",
		validators: [{
			validatorfunction: lunchOnlyForJohn,
			errorMessage:  "The Lunch task must be assigned to John Smith",
		}],
	},
};

const  Todo  =  ()  =>  {
const  { form, handleControlEvent }  =  useForm(controls);

return (
	<div  className={"todo-list-main"}>
		<form>
			{Object.keys(form.controls).map((key) =>
				form.controls[key].error && (
				<span  className={"error-message"}>
				{form.controls[key].errorMessage}
				</span>
			))}
			<input
				name="task"
				placeholder="Task"
				value={form.controls.task.value}
				onChange={handleControlEvent}
			/>
			<input
				name="assignto"
				placeholder="Assign To"
				value={form.controls.assignto.value}
				onChange={handleControlEvent}
			/>
			<button  className="primary"  type="button"  disabled={!form.valid}>
				Save
			</button>
		</form>
	</div>
);
};

export  default Todo;

useForm

|Property|Description | |-- |-- | | form | type of Form | | handleControlEvent | Control Event (Example: onChange, onClick, etc..) | setFormControlValue | Sometimes is necessary to update control value without dispatch a control event. Update specific control passing key and value | | resetForm | Reset the controls to the initial state| |addFormControl | Add new control, args: name, control( type of FormControl| |removeFormControl | Remove control, if has relation with other control an error will be throw|

Form

| Property | Type | |-- |-- | | controls | {[key: string]: FormControl} | | valid | Boolean (optional) | | value | Object {[controlName: string]: value} |

FormControl

| Property | Type | |-- |-- | | value | any | | error | Boolean (optional) | | errorMessage| string (optional)| | validators | Array of ControlValidator (optional)| | touched | boolean, the default value is false|

ControlValidator

| Property | Type | |-- |-- | | validatorfunction | type ValidatorFunction = (value: any) => boolean; | | errorMessage | string |