react-drag-drop-form-builder

React From Builder

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

Installation

  npm i react-drag-drop-form-builder
  import { FormContainer, ToolBox } from 'react-drag-drop-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 <FormContainer />

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 */
        <div className="app"/>
            <div className="row"/>
                <div className="col-8"/>
                    <FormContainer
                        debug={true} // turn on debuging mode
                        updateOnMount={true} // update on mount
                        updateForm={this.updateForm} 
                        onSave={this.save} 
                        custom={ myCustoms } />
                </div>
                <div className="col-8"/>
                    < ToolBox custom={ myCustoms } />
                 </div>
            </div/>
        </div/>
    }
    
    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