JSON-ReactForm

JSON React Form is library that convert JSON schema into React component forms.

Supported form's types

• text
• number
• textarea
• date
• select
• checkbox
• radio
• currency
• submit button

How To Use

Install this library using npm i json-reactform or yarn add json-reactform.

JSON Schema

Then define JSON schema with format:

[label_name] : {
    options
}

Options

Text, Number, Textarea --> return string

• type: text | number | textarea
• required: true | false
• disabled: true | false
• defaultValue: string
• placeholder: string

Date --> return ISO string

We use react-datepicker for rendering input type date.

• type: date
• required: true | false
• disabled: true | false
• defaultValue: new Date()

  example: new Date() for today or more specific with a certain date and time new Date("11 July 2020")

• format: string

  example: dd MM yyyy or MMMM dd, yyyy.

  See react-datepicker custom format.

Select --> return string (value of selected)

We use react-select for rendering input type select and its options. By default you can search option by typing in the field and you can clear the options by click on x button on the right side.

• type: select

• required: true | false

• disabled: true | false

• defaultValue: string

  It must be the exact same string that representing the option you wanna set as default options.

• placeholder: string

• createable: true | false

  Set to true if you want to add option on the fly. Simply by typing new options on the input field. The value you typed in will become the label of the new option object. You must provide the function to define your value based on that string within onCreateOption below.

• onCreateOption: callback

  The callback will receive string you've typed in the input field. Then you must return an object that at lest contain label and value. Example:

  {
    onCreateOption: text => {
      const value = text.toLowerCase();
      return {
        label: text,
        value,
      };
    };
  }

• options: array

  The options is array of object that consists at least label and value. Label will be displayed in the select's options, while value is the one that will be returned later.

Checkbox --> return array of string

• type: checkbox
• required: true | false
• disabled: true | false
• defaultValue: array of string

  It must be an array consisting the exact same string that representing the option you want to be set as checked by default.

• options: array

  The options is array of object that consists at least label and value. Label will be displayed in options, while value is the one that will be returned later.

Radio --> return string

• type: radio
• required: true | false
• disabled: true | false
• defaultValue: string

  It must be the exact same string that representing the option you want to be set as checked by default.

• options: array

  The options is array of object that consists at least label and value. Label will be displayed in options, while value is the one that will be returned later.

Submit

The key you provided to the model will become text inside this submit button.

• type: submit
• disabled: true | false

Example

export default {
  "Plan Date": {
    "type": "date",
    "format": "dd MMMM yyyy",
    "required": true
  },
  "Qty": {
    "type": "number",
    "required": true
  },
  "Item Number": {
    "type": "select",
    "required": true
    "options": [ //use static json arry to get options
      {
        "value": "1",
        "label": "item 1"
      },
      {
        "value": "2",
        "label": "item 2"
      }
    ],
  },
  "Parts": {
    "type": "checkbox",
    "required": true
    "options": [ //use static json arry to get options
      {
        "value": "checkbox_item_1",
        "label": "Checkbox 1"
      },
      {
        "value": "checkbox_item_2",
        "label": "Checkbox 2"
      }
    ],
  },
  "Status": {
    "type": "radio",
    "required": true,
    "options": [ //use static json arry to get options
      {
        "value": "completed",
        "label": "Completed"
      },
      {
        "value": "not_completed",
        "label": "Not Completed"
      }
    ],
  },
  "Save": { // button submit
    "type": "submit",
  }
}

Don't forget to include css bootstrap into your project.

import 'bootstrap/dist/css/bootstrap.min.css';

Within the component you want to add the form, import JsonToForm from library and your schema, make your submit function inside your component.

import JsonToForm from 'json-reactform';
import model from '../your/schema';

const YourComponent = () => {
  // Do anything within submit function.
  const submit = (params) => {
    console.log(params);
  }

  return (
    <div>
      <JsonToForm model={model} onSubmit={submit}/>
    </div>
  )
}

peerDependecies

Make sure you have these npm libraries installed within your project.

• react

Contributor

• Aji Agahari
• Nasrul Faizin
• Yuhanas Yulianto

Credits

reactjs reactstrap axios react-datepicker react-select

License

MIT