Hook Easy Form

Simple Form Example

This is a simple demonstration of how to work standard form.
All tricks and things which you want to use, write in form array and then 'hook-easy-form' will return a new array for work.

Form

JavaScript
TypeScript

const {} = easyHook({ initialForm: form });

type Data = {
  firstName: string;
  lastName: string;
  email: string;
  sex: string;
  role: string;
  verified: boolean;
  bio: string;
} // type which will be returned from submitEvent

type Objects = 'firstName'
  | 'lastName'
  | 'email'
  | 'sex'
  | 'role'
  | 'verified'
  | 'bio'; // types for formObject

const {} = easyHook<Data, Objects>({ initialForm: form });

Values

{
  "firstName": "",
  "lastName": "",
  "email": "",
  "sex": "",
  "role": "",
  "verified": false,
  "bio": ""
}

Code

export const formArray = [
  {
    name: 'firstName',
    value: '',
    options: {
      label: 'First Name',
    },
  },
  {
    name: 'lastName',
    value: '',
    options: {
      label: 'Last Name',
    },
  },
  {
    name: 'email',
    value: '',
    options: {
      label: 'Email',
    },
  },
  {
    name: 'sex',
    value: '',
    options: {
      label: 'Sex',
      type: 'radio',
      buttons: [
        { title: 'Male', value: 'male' },
        { title: 'Female', value: 'female' },
      ],
    },
  },
  {
    name: 'role',
    value: '',
    options: {
      label: 'Role',
      type: 'select',
      options: [
        { title: '', value: '' },
        { title: 'User', value: 'user' },
        { title: 'Administrator', value: 'admin' },
        { title: 'Moderator', value: 'moderator' },
      ],
    },
  },
  {
    name: 'verified',
    value: false,
    options: {
      label: 'Verified',
      type: 'checkbox',
    },
  },
  {
    name: 'bio',
    value: '',
    options: {
      label: 'Bio',
      type: 'textarea',
    },
  },
];