https://github.com/zero-one-group/form-builder
Simplify large form
https://github.com/zero-one-group/form-builder
form formgenerator formik formikformgenerator
Last synced: 8 months ago
JSON representation
Simplify large form
- Host: GitHub
- URL: https://github.com/zero-one-group/form-builder
- Owner: zero-one-group
- License: apache-2.0
- Created: 2022-02-25T10:57:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-27T02:30:51.000Z (over 3 years ago)
- Last Synced: 2024-04-23T10:54:39.867Z (about 2 years ago)
- Topics: form, formgenerator, formik, formikformgenerator
- Language: TypeScript
- Homepage: https://zero-one-group.github.io/form-builder
- Size: 421 KB
- Stars: 4
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @01group/form-builder
This is a lightweight react hook library to simplify approach in building formik form.
## Story behind
In our cases, we often found our development process was couples doing process in order to building form.
We find a better approach to make this more efficiency.
## Installation
```bash
yarn add @01group/form-builder
```
or if you prefer to choose `npm`
```bash
npm install -S @01group/form-builder
```
## Usage
This main library is using a react hook `useZeroForm`. It will return `fields` and `values`.
### Description
**fields**: list of object field that useful to handle form
**values**: object of value, it could be to fill `initialValues` in `formik`
### Example
**Nb.** Below is our approach. You might used your own, if you think this not suit enough for you.
```typescript
import { Formik, Form } from 'formik'
import { useZeroForm, ZeroFormTypes } from '@01group/form-builder';
export const DATA = {
name: '',
province_id: '',
city_id: '',
date_of_birth: '',
};
export const generalOptions = {
name: {
type: 'text',
label: 'Your name',
isRequired: true,
},
province_id: {
type: 'select',
label: 'Province',
placeholder: 'Select a province',
},
city_id: {
type: 'select',
label: 'City',
placeholder: 'Select a city',
},
};
export function Example() {
const { fields, values } = useZeroForm({ data: DATA as ZeroFormTypes, options: generalOptions });
return (
{(fields ?? []).map((field, i) => (
))}
)
}
export function GenerateField(props: ZeroFieldItem) {
const inputProps = {
id: props.name,
name: props.name,
label: props.label,
placeholder: props.placeholder,
isRequired: props.isRequired,
isReadOnly: props.isReadonly,
};
const selectProps = {
...inputProps,
items: props.selectOptions ?? [],
};
const elements: Partial, JSX.Element>> = {
select: ,
text: ,
row: ,
file: ,
};
return elements[props.type] ?? ;
}
```