Corleon-form-builder NPM

corleon-form-builder

a simple form builder and form generator for react with dependent field option

Install

npm install --save corleon-form-builder

Usage

import React, { useRef } from 'react'

import { FieldTypes, FormBuilder, FormGenerator, IForm, IFormGenerator } from 'corleon-form-builder'
import 'corleon-form-builder/dist/index.css'

const App = () => {
  const [formSchema, setFormShceam] = React.useState<IForm | undefined>();
  const formRef = useRef<IFormGenerator>(null);
  return <div className='app'>
    <div className='app-formbuilder'>
      <FormBuilder onEnd={(e) => {
        console.log(e);
        setFormShceam(e)
      }} />
    </div>
    <div className='app-formgenerator'>

      <div style={{margin:"20px 0"}}>
        <FormGenerator
          ref={formRef}
          onFieldChange={(f) => {
            console.log(f);
          }}
          onSubmit={(form) => {
            console.log(form)
          }}
          form={{
            "id": 0.6731003105999167,
            "fields": [
              {
                "id": 1,
                "name": "name",
                "status": "show",
                "type": FieldTypes.input,
                label: "نام نمایشی"
              },
              {
                "id": 2,
                "name": "family",
                "status": "show",
                "type": FieldTypes.checkbox,
                label: "نام نمایشی"
              },
              {
                "id": 3,
                "name": "folan",
                "status": "show",
                "type": FieldTypes.radio,
                "options": [
                  {
                    "id": "0.7248767748595493",
                    "value": "1"
                  },
                  {
                    "id": "0.19307079124156235",
                    "value": "2"
                  },
                  {
                    "id": "0.6658956623343486",
                    "value": "3"
                  }
                ],
                label: "نام نمایشی"
              },
              {
                "id": 4,
                "name": "beaman",
                "status": "show",
                "type": FieldTypes.select,
                "options": [
                  {
                    "id": "0.9129945763250256",
                    "value": "1"
                  },
                  {
                    "id": "0.6023080886274941",
                    "value": "2"
                  },
                  {
                    "id": "0.5572989441383838",
                    "value": "3"
                  }
                ],
                label: "نام نمایشی"
              }
            ]
          }} />

      </div>
      <button onClick={() => formRef.current?.submit()}>submit form</button>
    </div>
  </div>
}

export default App