hook-easy-form

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

Simple form

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

Simple form with validation and without tag 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>
}

Simple form with default values

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

Simple typescript example

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