react-build-form

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

1. 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

   4. col : it is bootstap column clases for (col-1 , col-md-1 , etc.)
   5. initialValue : it is initial value of form field
   6. validation : only accept yup validation schema
   7. required: this field is responsible red star, if required you can easily add red star
   8. props : it has all types of ANTD component props
   9. linear : default value is false | if true then input field items ordered horizontally
   10. 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
           }],
          
       }

13. 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'

2. onSubmit : this is function called after submit button click and all field is valid
3. button :
   1. title : button text
   2. props: similar to ANTD button props
4. 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

Author

@elvinmurshudlu