React-build-form NPM

What is this?

Build dynamic , complex forms more easy.

Requirements.

For components - ANTD ui library, Form - formik, Validation - Yup, Bootstrap for grid system (It will be removed next updates)

Installation

npm i react-build-form add : @import "bootstrap/scss/bootstrap" to your scss file

Usage

```
import {FormBuilder} from "react-build-form"

export default function YourComponent(){
    function doSmth(values){
        ....
    }

    return <FormBuilder inputScheme={[
           {
                label:'Username',
                field:'login',
                type:"text",
                col:"col-12",
                initialValue:null,
                validation:Yup.string().required(),
                required:true,
                props:{
                    placeholder:'Username or email',
                    size:'large',
                    prefix:<UsernameIcon/>,
                    style:{
                        padding:"12px"
                    }
                }

            }
        ]}
         onSubmit={(values)=>doSmth(values)} 
         button={{
            title:"Verify",
            props: {
                size:'large',
                style:{
                    width:"100%",
                    backgroundColor:'#7F56D9',
                    color:'white',
                    padding:"14px",
                    height:"auto"
                },
                className:'mb-3'
            }
        }}  />
}
```

Explanation

inputScheme
1. label : label for Input
2. field : write value's key (Above example values is {login:'any value you wrote'})
3. type : there is 9 types:
4. text : it renders simple Input component in ANTD
5. text-area : it renders TextArea component in ANTD
6. selection : it renders Select component in ANTD
7. tree-select : it renders Tree-select component in ANTD
8. switch : it renders switch component in ANTD
9. date : it renders Date component in ANTD
10. range : it renders Range component (Date component in range) in ANTD
11. upload : it renders Upload component in ANTD and all uploaded files store in key
12. custom : any custom component you want can render
13. container type : responsible for grouping inputs in one component :
```
 {
      type:'container',
      component:(nodesComingFromSchema)=><YourContainerComponent>{nodesComingFromSchema}</YourContainerComponent>,
      schema:[
          {
              type:'text',
              field:'test',
              initialValue:null,
              validation:Yup.string(),
              col:'col-12',
              
          }
      ]
  },
```
  then test input will placed in YourContainerComponent
14. col : it is bootstap column clases for (col-1 , col-md-1 , etc.)
15. initialValue : it is initial value of form field
16. validation : only accept yup validation schema
17. required: this field is responsible red star, if required you can easily add red star
18. props : it has all types of ANTD component props
19. linear : default value is false | if true then input field items ordered horizontally
20. showOn : receives array , first index of array is null or string[] (other fields name which depends on this fields) ,second index is callback that return boolen if true then shows othwerwise not shown

[{
            field:"other",
            initialValue:null,
            validation:Yup.string().nullable(),
            col: 'col-12 col-md-6 col-lg-4',
            type:'text',
            
        },
    {
            field:"parent",
            initialValue:null,
            validation:Yup.string().nullable(),
            col: 'col-12 col-md-6 col-lg-4',
            type:'text',
            
        },
        {
            field:'children',
            label:"Təsdiq edən şəxs",
            type:"text",
            required:true,
            initialValue:null,
            validation:Yup.number().nullable(),
            col:'col-12 col-md-6 col-lg-4',
            showOn:[['parent'],(values)=>{
                return  values[0] === condition
            }],
           
        },]

meaning : children input only depends on parent and values is array (parent) first index is parents value, if you want depends on both parent and other

{
           field:'children',
           label:"Təsdiq edən şəxs",
           type:"text",
           required:true,
           initialValue:null,
           validation:Yup.number().nullable(),
           col:'col-12 col-md-6 col-lg-4',
           showOn:[['parent','other'],([parentVal,otherVal])=>{
               return  ...your condition
           }],
          
       }

calculateValue : it means calculate inputs value depends on other inputs value

[
{
       field:"parent",
       initialValue:null,
       validation:Yup.string().nullable(),
       col: 'col-12 col-md-6 col-lg-4',
       type:'text',
       
   },
   {
       field:'children',
       label:"Təsdiq edən şəxs",
       type:"text",
       required:true,
       initialValue:null,
       validation:Yup.number().nullable(),
       col:'col-12 col-md-6 col-lg-4',
       calculateValue:[['parent'],([parentValue])=>{
           return  parentValue + ' world '
       }],
      
   },]

meaning if parents value is (hello) then children value is 'hello world'

onSubmit : this is function called after submit button click and all field is valid
button :
1. title : button text
2. props: similar to ANTD button props
customButtons : you can add more buttons to form and receives array
```
customButtons={[
                (values, customSubmit)=>{
                   return <Button>Second button</Button>
                }
                ]}
```
values is : form's values customSubmit : validates form if valid return true otherwise false