@arkejs/form

Form component to automate form generation process

Usage

First of all, you need to install the library:

npm install @arkejs/form
pnpm install @arkejs/form

You can create a FormProvider to associate automatically a component from field type:

import { FormConfigProvider } from '@arkejs/form'

function Application() {
  return (
    <FormConfigProvider
        components={{
          boolean: ({field}) => (<input {...field} type="checkbox" onChange={(e) => field.onChange(e.target.value)} />),
          string: ({field}) => (<Input{...field} onChange={(e) => field.onChange(e.target.value)} />)
        }}
    >
      ...
    </FormConfigProvider>
  )
}

Then you're able to import the Form and the FormField components:

import { FormConfigProvider, Form, FormField } from '@arkejs/form'

function Application() {
  return (
    <FormConfigProvider>
       <Form
         onSubmit={(values) => setData(values)}
         onChange={(values) => console.log(values)}
       >
         <div
           style={{
             display: 'grid',
             gridTemplateColumns: 'auto auto auto auto',
             gridGap: '8px 20px',
           }}
         >
           <FormField id="name" type="string" />
           <FormField id="surname" type="string"/>
           <FormField
             id="profile_image"
             // custom render ignore type 
             render={({field, formState, fieldState}) => (
               <AvatarCustomComponent {...field} />
             )}
           />
         </div>
       </Form>
    </FormConfigProvider>
  )
}

You can also use the Form without the general FormConfigProvider and use the components props to define the component by field type

import { Form, FormField } from '@arkejs/form'

function Application() {
    return (
        <Form
            onSubmit={(values) => setData(values)}
            onChange={(values) => console.log(values)}
            // Define here the components
            components={{
                boolean: ({field}) => (<input {...field} type="checkbox" />),
                string: ({field}) => (<input{...field} />)
            }}
        >
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto auto auto auto',
                    gridGap: '8px 20px',
                }}
            >
                <FormField id="name" type="string" />
                <FormField id="surname" type="string"/>
            </div>
        </Form>
    )
}

Manage the internal state

If you need to use the internal form state or useful functionalities, as looks the value of one field or reset the form state, you can use the useForm hook.

The methods object is based on react-hook-form library, to understand all functionalities look the React Hook Form Documentation

import { Form, FormField } from '@arkejs/form'

function Application() {
    const { formProps, methods } = useForm();
    const { watch, reset } = methods;
    const nameValue = watch('name');
    return (
        <Form
            {...formProps}
            onSubmit={(values) => setData(values)}
        >
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto auto auto auto',
                    gridGap: '8px 20px',
                }}
            >
                <FormField id="name" type="string" />
                {nameValue.length > 0 &&<FormField id="surname" type="string"/>}
            </div>
            <button type="button" onClick={() => reset()}>Reset fields</button>
        </Form>
    )
}

Define the DefaultValues

If you need to update the default values after first render you can pass fields directly on useForm:

import { Form, FormField } from '@arkejs/form'

async function Application() {
    const responseFields = await axios.get('/fields')
    const { formProps } = useForm({
        fields: responseFields.data,
    });
    return(
        <Form
            {...formProps}
            onSubmit={(values) => setData(values)}
        >
            ...
        </Form>
    )
}