hook-easy-form

Simple way to manage your form with custom hook. Please visit documentation for get more information

Installation

npm install hook-easy-form

Usage

import React from 'react';
import easyHook from 'hook-easy-form';

const form = [
  {
    name: 'firstName',
    value: '',
    options: {
      type: 'text',
    },
  },
  {
    name: 'lastName',
    value: '',
    options: {
      type: 'text',
    }
  },
  {
    name: 'age',
    value: '',
    options: {
      type: 'number',
    }
  },
]

const FormComponent = () => {
  const { formArray, updateEvent, resetEvent, submitEvent, pristine } = easyHook({ initialForm: form });
  const submit = (v) => console.log(v);

  return <form onSubmit={submitEvent(submit)}>
    {formArray.map(el => <input
      key={el.name} 
      name={el.name}
      type={el.options.type} 
      value={el.value}
      onChange={updateEvent}
      />
    )}
    <button onClick={resetEvent} disabled={pristine}>reset</button>
    <button type="submit" disabled={pristine}>submit</button>
  </form>
}

import React from 'react';
import easyHook from 'hook-easy-form';

const form = [
{
  name: 'firstName',
  value: '',
  options: {
    type: 'text',
  },
  validate: {
    required: v => v.trim() === '' ? 'Required' : '',
  }
},
{
  name: 'lastName',
  value: '',
  options: {
    type: 'text',
  }
  validate: {
    required: v => v.trim() === '' ? 'Required' : '',
  }
},
{
  name: 'age',
  value: '',
  options: {
    type: 'number',
  }
  validate: {
    required: v => v.trim() === '' ? 'Required' : '',
    availableAge: v => v > 0 && v < 100 ? '' : 'Invalid'
  }
},
]

const FormComponent = () => {
const { formArray, updateEvent, resetEvent, submitEvent, pristine } = easyHook({ initialForm: form });
const submit = (v) => console.log(v);

return <div>
  {formArray.map(el => <div>
    <input
      key={el.name} 
      name={el.name}
      type={el.options.type} 
      value={el.value}
      onChange={updateEvent}
    />
    {el.touched && el.error && <span>{el.error}</span>}
  </div>
  )}
  <button onClick={resetEvent} disabled={pristine}>reset</button>
  <button onClick={submitEvent(submit)} disabled={pristine}>submit</button>
</div>
}

import React from 'react';
import easyHook from 'hook-easy-form';

const sayHelloForm = [
  {
    name: 'firstName',
    value: '',
    options: {
      type: 'text',
      placeholder: 'FirstName',
    },
  },
  {
    name: 'lastName',
    value: '',
    options: {
      type: 'text',
      placeholder: 'LastName',
    },
  },
];

const FormComponent = () => {
  const {
    formArray,
    submitEvent,
    updateEvent,
    resetEvent,
    pristine
  } = MyEasyForm({
    initialForm: sayHelloForm,
    defaultValues: { firstName: 'Tony,', lastName: 'Stark' }
  });

  const submit = v => console.log(v)
  return (
    <form onSubmit={submitEvent(submit)}>
      {formArray.map((el) => (
        <input
          key={el.name}
          name={el.name}
          type={el.options ? el.options.type : 'text'}
          placeholder={el.options ? el.options.placeholder : ''}
          value={el.value}
          onChange={updateEvent}
        />
      ))}
      <button type="submit" disabled={pristine}>
        Submit
      </button>
      <button type="button" disabled={pristine} onClick={resetEvent}>
        Reset
      </button>
    </form>
  )
}

import easyHook from 'hook-easy-form';

type FormData = {
  firstName: string;
  lastName: string;
};

const Component = () => {
  const { formObject, submitEvent, disabled, valid, runValidate, getProps } =
    useEasyForm<FormData>({
      initialForm: [
        {
          name: 'firstName',
          value: '',
          required: true,
          options: {
            type: 'text',
          },
        },
        {
          name: 'lastName',
          value: '',
          required: true,
          options: {
            type: 'text',
          },
        },
      ],
    });

  const { firstName, lastName } = formObject;

  const onSubmit = submitEvent((d) => console.log('d', d));

  const onBlur = (e: React.FocusEvent<HTMLInputElement>) =>
    runValidate(e.target.name);

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          {...getProps('firstName', firstName.options)}
          onBlur={onBlur}
        />
        <input
          {...getProps('lastName', lastName.options)}
          onBlur={onBlur}
        />

        <button
          type="submit"
          disabled={disabled || !valid}
        >
          submit
        </button>
      </form>
    </div>
  );
};

Hook props

• initialForm is array of objects (required)

| Name | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | name | string | - | true | Name of input, unique identifier of each field | | value | any | undefined | false | Value for this object (filed) | | error | string | | false | String error | | touched | boolean | false | false | The value indicates whether it has been changed before | | isValidField | boolean | true | false | a boolean value which mean the field it was touched and doesn't have any validation errors | | validate | object of rules | {} | false | Object with functions for validate, function receive two arguments, current value and object with otherValues | | 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? | | options | object | {} | false | Object for rest user properties, it can be - type, placeholder, label, some options etc |

• resetAfterSubmit

| Name | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | resetAfterSubmit | boolean | false | false | Property for reset form after success submit |

Hook actions API

  formArray // form = array of objects
  formObject // form = object for non iterable cases
  updateEvent // event for onChange 
  resetEvent // reset form manually
  updateDefaultValues // dynamically set default values
  updateFormArray // dynamically set form array
  multipleFieldUpdate // update multiple values func 
  submitEvent // takes a callback as a param, return to callback formatted object
  setErrorManually // takes a name and error string as a params, and immediately set error for current name
  setValueManually // takes a name and value as a params, and immediately set value for current name
  pristine // true when the current form values are the same as the initialValues, false otherwise.
  valid // true when the form is valid (has no validation errors), false otherwise.
  disabled // boolean, calculated from required properties
  runValidate // takes a name and runs all validations functions belongs to this field
  getProps // takes a name, some object with params(optional), and boolean value for exclude not valid Dom attr (optional) => returns object with future props for element

Contribute

1. Fork it: git clone https://github.com/hook-easy-form/hook-easy-form.git
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Added some feature'
4. Check the build: npm run build
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :D