https://github.com/codemaskinc/react-form-builder-v2
https://github.com/codemaskinc/react-form-builder-v2
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/codemaskinc/react-form-builder-v2
- Owner: codemaskinc
- License: mit
- Created: 2021-09-22T13:39:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-13T11:59:52.000Z (about 2 years ago)
- Last Synced: 2024-11-10T08:37:45.766Z (over 1 year ago)
- Language: TypeScript
- Size: 30.9 MB
- Stars: 2
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
## 
React-form-builder-v2 is a library that allows you to create highly customizable forms by rendering your own components and storing the state. It works perfectly with ReactJS, React Native, and monorepo with React Native Web.
Create your own components and simply pass callbacks, errors, and values. You can store any type of value in the useField. It can be a string, boolean, number, array, or even an object.
### Features
- Fully working on hooks
- Relies only on react and ramda
- Highly customizable components
- Well typed (Typescript)
### [Live demo](https://codesandbox.io/embed/focused-firefly-j96uom)
## Install
`yarn add @codegateinc/react-form-builder-v2` or `npm install --save @codegateinc/react-form-builder-v2`
## Hooks
### useField
```typescript
type ValidationRule = {
errorMessage: string,
validate(value: T): boolean
}
useField(config)
```
#### useField config
| Property | Type | Description |
|-----------------|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| key | string | Default: `undefined`.
This field is required, must be a unique within whole form. |
| label | string | Default: `undefined`.
The label value that will be passed through the field. |
| initialValue | generic (T) | Default: `undefined`.
This field is required. This will define the initial value of the field. |
| isRequired | boolean | Default: `false`.
Defines if the field is required and should be mandatory. With `validation rules` it can be additionally validated. |
| placeholder | string | Default: `undefined`.
Placeholder value that will be passed via the field |
| validateOnBlur | boolean | Default: `false`.
Defines if the field should be validated when blurred. If false, validation will be checked on each change. |
| validationRules | Array`> | Default: `undefined`.
Array of validation objects that will define if the field is valid |
| liveParser | (value: T) => T | Default: `undefined`.
Function that, if defined, will be invoked every time the value changes. |
| submitParser | (value: T) => T | Default: `undefined`.
Function that, if defined, will be invoked after the submit function is invoked. |
| hasError | boolean | Default: `false`.
This value indicates if the field has an error. |
#### validationRules example
```typescript
validationRule: [
{
errorMessage: 'this field should be at least 2 chars',
validate: (value: string) => value.length >= 2
}
]
```
### useForm
```typescript
const statesAndFunctions = useForm(config, callbacks)
```
#### States and functions
| Property | Type | Description |
|----------------------|---------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| form | Record | Form with all values. |
| hasError | boolean | Indicates if the form has an error. |
| isFilled | boolean | Determines whether or not all fields have changed. |
| formHasChanges | () => boolean | Returns a boolean indicating whether any fields have changed. |
| setError | (key: string, errorMessage: string) => void | Sets an error to a field, even if the field is valid. After revalidation, this error disappears. It can be useful for server-side validation. |
| setFieldValue | (key: string, value: T) => void | Sets the field value. |
| setFieldInitialValue | (key: string, initialValue: string) => void | Sets a field's initial value. The value of the field will change if it is pristine. |
| addFields | (fields: Array`>`) => void | Adds new fields to the form. It allows users to create recurring forms or add new fields during runtime. |
| removeFieldIds | (ids: Array``) => void | Removes fields from the form at runtime. Deletes only fields that were added with the "addFields" function. Fields passed in by configuration cannot be removed. |
| resetForm | () => void | Resets all fields and forms to their initial values and states. |
| submit | () => void | Submits the form, validating all the fields that are required. |
| validateAll | () => boolean | Validates all fields. Returns if any field has error |
## Usage
### Basic
Let's create our first component
```typescript jsx
import React from 'react'
import { ReactSmartScroller } from '@codegateinc/react-form-builder-v2'
const getConfig = () => {
const name = useField({
key: 'name',
initialValue: '',
isRequired: true,
placeholder: 'name'
})
const surname = useField({
key: 'surname',
initialValue: '',
isRequired: true,
placeholder: 'surname'
})
return {
name,
surname
}
}
export const FormBuilder: React.FunctionComponent = () => {
const { form, submit } = useForm(getConfig(), {
onSuccess: validForm => console.log(validForm)
})
return (
save
)
}
const Container = styled.div`
display: flex;
flex-direction: column;
padding: 100px;
align-items: center;
input {
margin-bottom: 20px;
}
`
const Button = styled.div`
background-color: green;
padding: 10px 15px;
color: white;
border-radius: 20px;
cursor: pointer;
`
```
Here is a sandbox with 3 simple types of different components to show how it works
https://codesandbox.io/embed/fragrant-bush-4gpqkl?fontsize=14&hidenavigation=1&theme=dark
Below you can find some usage examples
### setError
```
setError('input', 'custom error')}>
set error
```
### setInitialValue
```
setInitialValue('input', 'this is new initial value')}>
set initial value
```
### setFieldValue
```
setFieldvalue('input', 'this is new value')}>
set field value
```
### addFields
```
addFields([{
key: 'second input',
placeholder: 'second input'
}])}
>
add field
```
### removeFields
```
addFields([{
key: 'second input',
placeholder: 'second input'
}])}
>
add field
removeFieldIds(['second input'])}
>
remove field
```
## Contribution
Library created by [Jacek Pudysz](https://github.com/jpudysz) and [Grzegorz Tarnopolski](https://github.com/gtarnopolski)