Reactjs Dynamic Form
Form generator and handling module built to use with reactjs. Uses reactstrap to style the forms.
Requirements
- reactjs
- react-select
- reactstrap
- bootstrap
Installation
Install using yarn or npm
yarn add reactjs_dynamic_form
Import
import FormFields from 'reactjs_dynamic_form';
Install other requirements
yarn add reactstrap@next react react-dom react-select@next bootstrap
Add imports
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-select/dist/react-select.css';
Usage
This is the basic working demo with most of the features
{ superprops; thisstate = // we track which field was changed recently whatChanged: null // keep the data isolated from other current: eventName: null eventDate: null locationKnown: null location: null ; thisupdateCurrentFieldWithValue = thisupdateCurrentFieldWithValue; thisupdateEventDate = thisupdateEventDate; } { console; var c = thisstatecurrent; ceventDate = eventtargetvalue; this; } // normal fields sends event object only // react-select will send field, val, opt, original. original will contain // all the data { console; console; var c = thisstatecurrent; var fname = ''; try cfieldtargetname = fieldtargetvalue; fname = fieldtargetname; catch e cfield = val; fname = field; this; } { var url = 'https://jsonplaceholder.typicode.com/comments'; var current = thisstatecurrent; var cstate = thisstate; var fields = name: "NewDataForm" defaults: whatChanged: thisstatewhatChanged update: thisupdateCurrentFieldWithValue // handling json response, can be overridden in individual // fields { console; return json; } layout: // the layout will be bootstrap grid, size is number of cols in each // row, each col contain one field size: 4 4 4 fields: field: 'eventName' caption: "Event Name" // react components are allowed fieldType: 'text' value: thisstatecurrenteventName field: 'eventDate' caption: "Event Date" fieldType: 'date' value:thisstatecurrenteventDate update: thisupdateEventDate // select box using react-select, using fixed data field: "locationKnown" caption: "Location Known" value: thisstatecurrentlocationKnown fieldType: "select" options: label: "Yes" value: "Yes" label: "No" value: "No" size: 6 6 fields: field: 'eventEnded' caption: "Event End Date" fieldType: 'number' value: thisstatecurrenteventEnded // react-select using external source field: 'location' caption: 'Locations' fieldType: 'select' value: currentlocation // visibility based on another field visible: currentlocationKnown === 'Yes' // required or not, based on another field required: thisstatecurrentlocationKnown === 'Yes' { return url; } // get options { return label: locationname value: locationid } // when to update { return "locationKnown" >= 0; } ; return <div className="App"> <Container> <header className="App-header"> <h1 className="App-title">Welcome to React</h1> </header> <Form key="ParticipantInputForm"> <FormFields fields=fields key="whateverItWas" /> </Form> </Container> </div> ; }