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