https://github.com/arkemishub/form

Flexible and extensible form
https://github.com/arkemishub/form

arke form

Last synced: 19 days ago
JSON representation

Flexible and extensible form

• Host: GitHub
• URL: https://github.com/arkemishub/form
• Owner: arkemishub
• License: apache-2.0
• Created: 2023-05-12T13:00:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-29T09:47:38.000Z (10 months ago)
• Last Synced: 2024-12-08T04:46:55.808Z (about 1 month ago)
• Topics: arke, form
• Language: TypeScript
• Homepage: https://form.arkehub.com
• Size: 5.77 MB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# @arkejs/form

![Form](https://github.com/arkemishub/form/assets/81776297/7fb75374-a210-4c21-8337-b3504cc82f00)

[![License](https://img.shields.io/badge/license-Apache2.0-blue.svg)](https://github.com/arkemishub/arke-monorepo/blob/master/LICENSE.txt)

Form component to automate form generation process

## Usage

First of all, you need to install the library:

```shell

npm install @arkejs/form

pnpm install @arkejs/form

```

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

```tsx

import { FormConfigProvider } from '@arkejs/form'

function Application() {

  return (

     ( field.onChange(e.target.value)} />),

          string: ({field}) => ( field.onChange(e.target.value)} />)

        }}

    >

      ...

    

  )

}

```

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

```tsx

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

function Application() {

  return (

    

        setData(values)}

         onChange={(values) => console.log(values)}

       >

         


           

           

            (

               

             )}

           />

         

       

    

  )

}

```


You can also use the Form without the general FormConfigProvider and use the `components` props to define the component

by field type

```tsx

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

function Application() {

    return (

         setData(values)}

            onChange={(values) => console.log(values)}

            // Define here the components

            components={{

                boolean: ({field}) => (),

                string: ({field}) => ()

            }}

        >

            


                

                

            

        

    )

}

```


## 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](https://www.react-hook-form.com/)

```tsx

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

function Application() {

    const { formProps, methods } = useForm();

    const { watch, reset } = methods;

    const nameValue = watch('name');

    return (

         setData(values)}

        >

            


                

                {nameValue.length > 0 &&}

            

             reset()}>Reset fields

        

    )

}

```


## Define the DefaultValues

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

```tsx

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

async function Application() {

    const responseFields = await axios.get('/fields')

    const { formProps } = useForm({

        fields: responseFields.data,

    });

    return(

         setData(values)}

        >

            ...

        

    )

}

```