ReactDynamicForms.js
A react component to create dynamic forms based on a config.json
react-dynamic-forms on heroku
Demo onlineInstall
npm install --save @rogeroliveira84/react-dynamic-forms
How to use
- 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": ""
}
]
}
Rendered Form
Output JSON
{
"timeStamp": 1551747768847,
"data": [
{
"name": "fullname",
"value": "My name"
},
{
"name": "dateOfBirth",
"value": "1980-01-01"
},
{
"name": "favorityFruits",
"value": "1"
}
]
}
Roadmap
Version 0.4.0
-
✅ 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
Version 0.5.0
-
✅ 2.1 - Add dropbox component -
✅ 2.2 - Add more options to the inputs: required, placeholder
Version 0.6.0
- 3.1 - Add dynamic table type
- 3.2 - Add CRUD to values of table type
License
ReactDynamicForms is MIT licensed.