# zubair-react-form-builder > [![npm package](https://img.shields.io/badge/npm-1.1.0-green.svg?style=flat-square)](https://www.npmjs.com/package/zubair-react-form-builder) [![Build Status](https://img.shields.io/circleci/project/github/RedSparr0w/node-csgo-parser.svg)](https://www.np Latest version **1.1.1** (published 2018-03-30) · MIT license · 0 weekly downloads ## Install ```sh npm install zubair-react-form-builder pnpm add zubair-react-form-builder yarn add zubair-react-form-builder bun add zubair-react-form-builder ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.1 | | Published | 2018-03-30 | | First published | 2018-02-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 11 | | Unpacked size | 1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 19 | | Author | Zubair Ibrahim | | Maintainers | zubair.paizer | | Keywords | zubair-react-form-builder, react form builder, react form generator, react form creator, zubair react form builder, form builder, react form, form generator | ## Links - npm: https://www.npmjs.com/package/zubair-react-form-builder - Repository: https://github.com/zubairpaizer/zubair-react-form-builder - Issues: https://github.com/zubairpaizer/zubair-react-form-builder/issues - npm.io page: https://npm.io/package/zubair-react-form-builder ## Dependencies (11) - [react](https://npm.io/package/react.md) ^16.2.0 - [jquery](https://npm.io/package/jquery.md) ^3.3.1 - [lodash](https://npm.io/package/lodash.md) ^4.17.5 - [bootstrap](https://npm.io/package/bootstrap.md) ^4.0.0 - [jquery-ui](https://npm.io/package/jquery-ui.md) ^1.12.1 - [popper.js](https://npm.io/package/popper.js.md) ^1.12.9 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0 - [react-scripts](https://npm.io/package/react-scripts.md) 1.1.1 - [jquery-ui-dist](https://npm.io/package/jquery-ui-dist.md) ^1.12.1 - [jquery-ui-timepicker-addon](https://npm.io/package/jquery-ui-timepicker-addon.md) ^1.6.3 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.1 (latest) — 2018-03-30 - 1.1.0 — 2018-03-03 - 1.0.9 — 2018-03-01 - 1.0.8 — 2018-03-01 - 1.0.7 — 2018-03-01 - 1.0.6 — 2018-03-01 - 1.0.5 — 2018-02-28 - 1.0.4 — 2018-02-28 - 1.0.3 — 2018-02-28 - 1.0.2 — 2018-02-28 - 1.0.1 — 2018-02-28 - 1.0.0 — 2018-02-28 ## README [![npm package](https://img.shields.io/badge/npm-1.1.0-green.svg?style=flat-square)](https://www.npmjs.com/package/zubair-react-form-builder) [![Build Status](https://img.shields.io/circleci/project/github/RedSparr0w/node-csgo-parser.svg)](https://www.npmjs.com/package/zubair-react-form-builder) # 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';
![](zrfb-screenshot-1.png) ![](zrfb-screenshot-2.png) ## 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
--- _Source: https://npm.io/package/zubair-react-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._