react-semantic-form-builder v1.0.6

React-Semantic-Form-Builder

Component Using Semantic UI To Easily Build Forms On Your Application Features Include:

• Quickly Add Different Form Types To Your Application such as Dropdowns, Input, Checkboxes & Text Areas

Demo: https://react-semantic-form-builder.netlify.app/

Installation

npm install react-semantic-form-builder --save

Props

Example

import React, { useState } from "react";
import FormDisplay from "react-semantic-form-builder";
import ReactDOM from "react-dom";

export default function BuildForm() {
  let [value, setValue] = useState({});

  let options = [
    { text: "1", value: 1 },
    { text: "2", value: 2 },
    { text: "3", value: 3 },
    { text: "4", value: 4 },
  ];

  console.log(value);

  return (
    <FormDisplay
      form={[
        //[['name', 'label'],['formType', optionsForDropdown, multipleValues], width(4=25% + 16=100%)]
        [["multipleDropdown"], ["Select", options, true], 4],
        [["input"], ["Input"], 4],
        [["singleDropdown"], ["Select", options], 4],
        [["textArea"], ["TextArea"], 4],
        [["grouping", "Set Grouping On Form"], ["Checkbox"], 4],
        [["checkbox", "Standard Checkbox"], ["Checkbox"], 4],
      ]}
      mandatoryFields={["input", "singleDropdown", "checkbox"]}
      setFormObj={setValue}
      formObj={value}
      grouping={false}
    />
  );
}
ReactDOM.render(<BuildForm />, document.getElementById("root"));