React-dynamic-json-form NPM

How To Use

Field

Name	Description	Required
id	This id will be put as the name of the field / input element	✔️
type	The type of the field (text, select, textarea, upload, radio, checkMark,checkbox, search, multiWebURL)	✔️
prefix	This field will be put as the label before the field
suffix	This field will be put as the label after the field
child	Child (Except multiWebURL)

Note : If you don't provide a value for a field, it will be considered undefined. Note : Pattern validation value must contain valid regEx without any starting /, ending / and flag /img.

Child

{
  "child": [
    {
      "match": "Surat",
      "field": {
        "id": "area",
        "label": "Area",
        "type": "checkbox",
        "options": "[Katargam, Singanpore, Ved, Adajan]"
      }
    },
    {
      "match": "Mumbai",
      "field": {
        "value": "",
        "id": "area",
        "type": "text",
        "label": "Area",
        "placeholder": "Enter area"
      }
    }
  ]
}

InputField Extends Field

Name	Description	e.g.
Label	Label of the field	First Name , age , email
Placeholder	The placeholder of the field	Enter First Name , Enter age, Enter email
value	The default value of the field	John , 20 , test@gmail.com
width	The width was modified by adjusting its width.	10, 20 - (unit in px)
multiline	This is a multi-line text that can be used as a textarea field.	true / false
rules	Validation rule for this field.	{ required:{ value:true message:Please enter name }, min:{ value:18 message:Age Should Be More than 18 }, max:{ value:25 message:Age Should Be Less than 25 }, minLength:{ value:5 message:Name Should Be More than 5 Character }, maxLength:{ value:10 message:Name Should Be Less than 10 Character }, pattern:{ value:^A-Z0-9._%+-+@A-Z0-9.-+.A-Z{2}$ message:Enter valid email },}

Radio Extends Field

Name	Description	e.g.
Label	Label of the field	Gender
options	The options array will be render as multiple Radio Button to select.	Male, Female
rules	Validation rule for this field.	{ required:{ value:true message:Please select gender },}

CheckBox Extends Field

Name	Description	e.g.
Label	Label of the field.	Hobby
options	The options array will be render as multiple CheckBox to select.	'cricket', 'football'
rules	Validation rule for this field.	{ required:{ value:true message:Please select hobby },}

CheckMark Extends Field

Name	Description	e.g.
Label	Label of the field.	Hobby
rules	Validation rule for this field.	{ required:{ value:true message:Please select hobby },}

Select Extends Field

Name	Description	e.g.
Label	Label of the field.	City
value	The default value of the field	Surat
options	The options of field.	Surat, Mumbai, Delhi
rules	Validation rule for this field.	{ required:{ value:true message:Please select city },}

Search Extends Field

Name	Description	e.g.
Label	Label of the field.	Search code
api	The api of field.	Your API endpoint
Placeholder	The placeholder of the field.	Enter code
rules	Validation rule for this field.	{ required:{ value:true message:Please select 3 value }, minLength:{ value:3 message:Value not less then 3 }, maxLength:{ value:5 message:Value not more then 5 },}

Upload Extends Field

Name	Description	e.g.
Label	Label of the field.	File
accept	Accept html file type.	https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
multiple	The field allows for the selection of multiple files.	true / false
rules	Validation rule for this field.	{ required:{ value:true message:File is required }, size:{ value:100 message:File should be less than 100 Kb }, resolution:{ value:{ width:100 height:100 }, message:File should be 100 X 100 },}

multiWebURL Extends Field

Name	Description	e.g.
Label	Label of the field.	File
child	Child will be render as component	Accept all InputField Props(parameter)
rules	Validation rule for this field.	{ NO:You can't pass the rules here. Instead, you can pass rules in child Props(parameter)}