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