@laszloblum/hook-easy-form v2.6.10

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

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

Hook props

• initialForm is array of objects (required)

• resetAfterSubmit

• defaultValues

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

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