A react component to create dynamic forms based on a config.json
npm install --save @rogeroliveira84/react-dynamic-forms
- Use the react component call below:
- The "configData" is a javaScript object that defines the form fields to be dynamically created:
const configData = {
"name": "Client Register",
"fields": [
{
"id": "fullname",
"label": "Full Name",
"description": "The full name of the client",
"type": "text",
"value": "",
"required": "true",
"placeholder": "Type your full name...",
"definition": {
"maxlength": "5"
},
"defaultValue": ""
},
{
"id": "dateOfBirth",
"label": "Date Of Birth",
"description": "",
"type": "date",
"value": "",
"required": "false",
"placeholder": "",
"defaultValue": ""
},
{
"id": "favorityFruits",
"label": "Favorite Fruits",
"description": "",
"type": "array",
"value": "",
"required": "false",
"placeholder": "",
"definition": {
"options": [
{
"id": 1,
"display": "Apple"
},
{
"id": 2,
"display": "Banana"
},
{
"id": 3,
"display": "Watermelon"
}
]
},
"defaultValue": ""
}
]
}
{
"timeStamp": 1551747768847,
"data": [
{
"name": "fullname",
"value": "My name"
},
{
"name": "dateOfBirth",
"value": "1980-01-01"
},
{
"name": "favorityFruits",
"value": "1"
}
]
}
- ✅ 1.1 - Define the dynamic-form-config: able to mount the forms from it
- ✅ 1.2 - Add form
- ✅ 1.3 - Add caption and description to the inputs
- ✅ 1.4 - Add input component types: text, number
- ✅ 1.5 - Add onSubmit method prop
- ✅ 1.6 - Add input component types: date (html5), datetime (html5), time (html5)
- ✅ 1.7 - Add styles to the component
- ✅ 2.1 - Add dropbox component
- ✅ 2.2 - Add more options to the inputs: required, placeholder
- 3.1 - Add dynamic table type
- 3.2 - Add CRUD to values of table type
ReactDynamicForms is MIT licensed.