API & props

</> initialFormArray

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 });
KeyTypeDefaultRequiredDescription
namestring-trueName of input, unique identifier of each field
valueanyundefinedtrueValue for this field
errorstringempty stringfalseString error, which returned from validation function
touchedbooleanfalsefalseThe value indicates whether it has been changed before
validateobject of rulesempty objectfalseObject with functions for validate, function receive two arguments, current value and object with otherValues
optionsobjectundefinedfalseObject for rest user properties, it can be - type, placeholder, label, some options etc
requiredbooleanfalsefalseThis field will be track inside `disabled` property
onChangeValidatebooleanfalsefalseShould validate this field each time when it change?

</> defaultValuesObject

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' } });
          

</> resetAfterSubmitBoolean

Flag for reset form after success submit

  • 
        const {} = easyHook({ resetAfterSubmit: true }); // default is false
          

</> formArrayArray

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: "",
          ...
        },
        ...
    ]

</> formObjectObject

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: "",
          ...
        },
        ...
    }

</> updateEventFunction

Event for onChange, takes event from input and automatically set value to the field

  • 
    <input value={value} onChange={updateEvent} />
        

</> resetEventFunction

Event for reset all field values in form manually

  • 
    const resetForm = () => resetEvent()
        

</> updateDefaultValuesFunction

For dynamically changing default values property, takes a defaultValues object

  • 
    const changeDefaultValues = () => updateDefaultValues({ firstName: 'John' }) // { string: any }
        

</> updateFormArrayFunction

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)

</> submitEventFunction

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/>

</> setErrorManuallyFunction

Event for immediately setting error in field, takes a name and error string as a params.

  • 
    const setError = () => setErrorManually('lastName', 'Incorrect')
       

</> setValueManuallyFunction

Event for immediately setting value in field, takes a name and value as a params.

  • 
    const setValue = () => setValueManually('lastName', 'Anthony')
       

</> runValidateFunction

Event for immediately runs all validations functions which belong to some field, can be useful for `onBlur` event.

  • 
    const validate = () => runValidate('firstName')
       

</> pristineBoolean

True when the current form values are the same as the initialValues, false otherwise

</> validBoolean

True when the form is valid (has no validation errors), false otherwise.

</> disabledBoolean

Calculated from required properties, in all form items.

</> getPropsFunction

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} />