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

  • 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

  • []

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',
        },
      },
    ];