react-form-from-json
Create dynamic forms from json config file
Install
npm i react-form-from-json
or
yarn add react-form-from-json
Dev
In root run with concurrently (which is installed globally npm i -g concurrently
)
concurrently "yarn start" "cd example && yarn start" "cd example && json-server --watch example-json.json --port 3100"
Usage
Form properties
handler
-> Each field has handler prop, which defines what to do with input (see example apphandleInput
)fields
-> An array of fields, which will be rendered in the applicationdisplayUnder
-> Whether or not should fields be rendered next to the labels, iftrue
field will be rendere under the label (seeRendered
section),true
by default
Example code with axios request (response json shown below)
Form works with following fields formats
JSON (with currently working input types)
Full example json is in example\example-json.json
CSS (index.css of App)
Added custom class names for each field
You can add the class name into the json
or just expand field array before passing it down as props
Rendered
When displayUnder
prop is true
Roadmap
-
Arrays - JSON
- Change state of field
- Fill payload
- Form submit action
- ClassNames
- Default ClassNames
- Custom ClassNames for each field
- Global ClassNames
- Styles from file as prop
- Default values
- Input types
- Date inputs
- Date
- Formats
- Min - Max
- Exclude dates
- Include dates
- Filter dates
- Higligh dates
- Date
- Selectors
- Select
- Checkbox
- Color
- File
- Radio
- Range
- Min - Max
- Datalist
- Text inputs
- Text
- URL
- Tel
- Number
- Password
- TextArea
-
Search
- MISC
-
Hidden -
Reset -
Submit
-
- Date inputs
- Validators - regex from json parameter
,
License
MIT © johnathan-codes