</>
initialForm: Array
That is array of objects, which contain all properties for form setup
const sayHelloForm = [ { name: 'name', value: '', onChangeValidate: false, required: false, validate: {}, options: {}, }, ]; const {} = easyHook({ initialForm: sayHelloForm });
Key | Type | Default | Required | Description |
---|---|---|---|---|
name | string | - | true | Name of input, unique identifier of each field |
value | any | undefined | true | Value for this field |
error | string | empty string | false | String error, which returned from validation function |
touched | boolean | false | false | The value indicates whether it has been changed before |
validate | object of rules | empty object | false | Object with functions for validate, function receive two arguments, current value and object with otherValues |
options | object | undefined | false | Object for rest user properties, it can be - type, placeholder, label, some options etc |
required | boolean | false | false | This field will be track inside `disabled` property |
onChangeValidate | boolean | false | false | Should validate this field each time when it change? |
</>
defaultValues: Object
The values with which to initialize your form, keys in object should be matched with 'name' property in form item
const {} = easyHook({ defaultValues: { name: 'John' } });
</>
resetAfterSubmit: Boolean
Flag for reset form after success submit
const {} = easyHook({ resetAfterSubmit: true }); // default is false
</>
formArray: Array
Array of fields what you pass to the hook, contain all properties which need for form, and all properties which you pass to the option object.
[ { name: "firstName", options: {label: "First Name"}, value: "", ... }, ... ]
</>
formObject: Object
Object with all fields what you pass to the hook, contain all property, can be useful for non iterable cases
{ firstName: { name: "firstName", options: {label: "First Name"}, value: "", ... }, ... }
</>
updateEvent: Function
Event for onChange, takes event from input and automatically set value to the field
<input value={value} onChange={updateEvent} />
</>
resetEvent: Function
Event for reset all field values in form manually
const resetForm = () => resetEvent()
</>
updateDefaultValues: Function
For dynamically changing default values property, takes a defaultValues object
const changeDefaultValues = () => updateDefaultValues({ firstName: 'John' }) // { string: any }
</>
updateFormArray: Function
For dynamically setting form array
const sayHelloForm = [ { name: 'firstName', value: '', options: { type: 'text', placeholder: 'FirstName', }, }, { name: 'lastName', value: '', options: { type: 'text', placeholder: 'LastName', }, }, ]; const changeDefaultValues = () => updateDefaultValues(sayHelloForm)
</>
submitEvent: Function
Takes a callback as a param, return formatted object to callback function
const submit = (values) => console.log(values) // { string: any } <form onSubmit={submitEvent(submit)}> ... </form/>
</>
setErrorManually: Function
Event for immediately setting error in field, takes a name and error string as a params.
const setError = () => setErrorManually('lastName', 'Incorrect')
</>
setValueManually: Function
Event for immediately setting value in field, takes a name and value as a params.
const setValue = () => setValueManually('lastName', 'Anthony')
</>
runValidate: Function
Event for immediately runs all validations functions which belong to some field, can be useful for `onBlur` event.
const validate = () => runValidate('firstName')
</>
pristine: Boolean
True when the current form values are the same as the initialValues, false otherwise
</>
valid: Boolean
True when the form is valid (has no validation errors), false otherwise.
</>
disabled: Boolean
Calculated from required properties, in all form items.
</>
getProps: Function
Event for returns object with future props for element
const props = getProps('email', { type: 'text' }, false); // -> { name: 'email', value: '', type: 'text', touched: false, error: '', onChange: updateEvent } or const props = getProps('email', { type: 'text' }, true); // if pass third parameter like "true", that meant's function will return only valid dom attributes // -> { name: 'email', value: '', type: 'text', onChange: updateEvent } or const props = getProps('email'); // -> { name: 'email', value: '', touched: false, error: '', onChange: updateEvent } <input {...props} />