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

Prop	Description	Type
form	Used To Draw Custom Forms	array
mandatoryFields	Fields which will be highlighted in red if not set	array
setFormObj	Function to update your form object	function
formObj	Form object	object
grouping	Whether form should be grouped inline or on separate lines	boolean

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"));