Zubair React From Builder

Zubair React Form Builder help you to build forms with drag and drop you can also inject your own component.

Installation

  npm i zubair-react-form-builder
  import { FormContainer, ToolBox } from 'zubair-react-form-builder'; 

FormContainer Props

1. custom : Array
2. onSave(form) : Function
3. updateForm(callback) : Function
4. updateOnMount : Boolean
5. debug : Boolean
6. loader: Boolean // set save button on loading state

// Note OnSave Props also turn on Save Button on

ToolBox Props

1. custom : Array

Example

You can pass custom components to the form builder

const myCustoms = [
    {
        container : < ContainerComponent/>,
        preview : < PreviewComponent/>,
        toolbox : {
            title : 'Component',
            icon : 'fa fa-user',
            name : 'CUSTOM_COM'
        },
        states : {
            toolType: 'CUSTOM_COM',
            num1 : 1,
            num2 : 2
        }
    }
]
 
class App extends React.Component {
    render(){
        /* Simply pass myCustoms to */
        
            
                
                    
                
                
                    < ToolBox custom={ myCustoms } />
                 
            
        
    }
 
    save(form){
        // you will receive form
        console.log(form);
    }
 
    updateForm(callback){
        // fetch form and set it to callback
        let form = axios.......
        callback(form)
    }
}

Required Props Methods Of Custom Component

1. this.props.changeState(state, this.props.index)

2. this.props.removeField(index)

Example Props Methods

        // on change state
        changeValue(stateFor, value){
            switch (stateFor){
                case "TITLE" :
                    this.setState( { title : value } )
                    break;
                default:
                    return;
            };
            setTimeout(() => {
                return this.props.changeState(this.state, this.props.index);
            }, 0)
        }
 
 
         this.changeValue('TITLE', e.target.value)} />
 
         // on remove field   
         this.props.removeField(this.props.index)}>x