Hook Easy Form

Basic Usage Guide

Step 1 of 3: installation

Installing Hook Easy Form only takes a single command and you're ready to roll.

```
npm install hook-easy-form
```

Step 2 of 3: Create Form Array

Create an array with full description for your form, or you can use our Constructor for it.

export const form = [
  {
    name: "name",
    value: '',
    required: true,
    options: {
      type: "text"
    },
    validate: {}
  },
  {
    name: "email",
    value: '',
    required: true,
    options: {
      type: "email"
    },
    validate: {}
  },
  {
    name: "age",
    value: '',
    required: true,
    options: {
      type: "number"
    },
    validate: {}
  },
];

Step 3 of 3: Use your Form Array

Pass your form which you generate on step 2, to the hook, and now you can use it.

import React from 'react';
import { form } from './form';

const Component = () => {
  const {
    formArray, updateEvent, resetEvent, disabled, valid, runValidate, submitEvent,
  } = easyHook({ initialForm: form });

  const onSubmit = submitEvent((v) => console.log(v));

  return (
    <form onSubmit={onSubmit}>
      {formArray.map((el) => (
        <div key={el.name}>
          <input
            name={el.name}
            type={el.options.type}
            value={el.value}
            onChange={updateEvent}
            onBlur={runValidate}
          />
        </div>
      ))}
      <button type="submit" disabled={disabled || !valid}>Submit</button>
      <button type="button" onClick={resetEvent} disabled={disabled || !valid}>Reset</button>
    </form>
  );
};