React fast and dynamic form constructor.
🚀 This library is a comprehensive solution for creating dynamic forms based on the described structure.
👌 The design is implemented on top of antd, but there are plans to implement UI adapters to fine-tune the display.
npm install react-json-fast-forms
yarn add react-json-fast-forms
🔧 At work...
Property |
Type |
Description |
Required? |
id |
String |
The unique identifier of the component |
✓ |
value |
Object Config |
The designation of the reference to the state property of the form |
|
render |
Object Config |
The displayed description of the component |
|
available |
Object Config |
List of child components |
|
layout |
Object Config |
Layout settings |
|
async |
Object Config |
Read-only attribute |
|
validate |
Object Config |
Component content |
|
components |
String |
Image description |
|
type |
String |
Type of component |
✓ |
Property |
Type |
Description |
Required? |
valueName |
String |
|
|
defaultValue |
String |
|
|
path |
String |
|
|
Property |
Type |
Description |
Required? |
label |
String |
|
|
values |
Value |
|
|
placeholder |
String |
|
|
multiple |
Boolean |
|
|
content |
String |
|
|
alt |
String |
|
|
source |
String |
|
|
text |
String |
|
|
defaultRepetitions |
Number |
|
|
allowAddRemove |
Boolean |
|
|
Property |
Type |
Description |
Required? |
readonly |
String |
|
|
dependsCondition |
JSON Function |
|
|
Property |
Type |
Description |
Required? |
labelCol |
Number |
|
|
direction |
vertical | horizontal |
|
|
align |
left | center | right |
|
|
Property |
Type |
Description |
Required? |
type |
fetch/post | fetch/get | gql |
|
|
url |
String |
|
|
query |
String |
|
|
data |
{intersectProcessing: JSON Function} |
|
|
fetch |
{onInit: Boolean, ifUndefined: Boolean, conditionFromDepends: JSON Function} |
|
|
depends |
Array<{value: String, path: String | String[]}> |
|
|
extractors |
{value: JSON Function, label: JSON Function} |
|
|
Property |
Type |
Description |
Required? |
required |
Boolean |
|
|
validateFunc |
JSON Function |
|
|
min |
Number |
|
|
max |
Number |
|
|
step |
Number |
|
|
textReq |
String |
|
|
minLength |
Number |
|
|
maxLength |
Number |
|
|
The examples folder contains working examples.
You can run one of them with.