/jsonschema-form-for-material-ui

Material-UI port of react-jsonschema-form

Primary LanguageJavaScript

jsonschema-form-for-material-ui

A Material UI port of react-jsonschema-form.

Project forked from Graham King.

The initial project had lots of stuff in it, including a strict node version and demo server.

This package:

  • Updated packages
  • Not pre-bundled
  • Better layout
  • Will be supported and updated

I will be monitoring Mozilla's repo for changes: they plan on becoming ui-agnostic, and I will migrate this project into a wrapper of that one when that happens (which will be a major version bump)

Update: Mozilla is doing something similar: See rjsf-team/react-jsonschema-form#1222 for details

Installation

npm install --save jsonschema-form-for-material-ui

Usage

import SchemaForm from 'jsonschema-form-for-material-ui';

const styles = theme => ({
  field: {},
  formButtons: {},
  root: {},
});

const schema = {
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "age": {
      "type": "integer",
      "title": "Age"
    }
  }
}

const uiSchema = {
  "firstName": {
    "ui:autofocus": true,
    "ui:emptyValue": ""
  },
  "age": {
    "ui:widget": "updown",
    "ui:title": "Age of person",
    "ui:description": "This description will be in a Popover"
  }
}

const initialFormData = {
  "firstName": "Chuck",
  "lastName": "Norris",
  "age": 75,
}

<SchemaForm
  classes={classes}
  schema={schema}
  uiSchema={uiSchema}
  formData={initialFormData}
  onCancel={this.onCancel}
  onSubmit={this.onSubmit}
  onChange={this.onFormChanged}
/>

API

Prop Description
schema The JSON Schema that will be the base of the form
classes withStyles() classes that get passed to root components for better styling of the form
uiSchema Extra styling for fields.
Each key references one schema key
formData The initial data with which to populate the form
onCancel Called when the Cancel button is pressed
onSubmit Called when the Submit button is pressed
onChange Called when form data is changed
cancelText Text for the Cancel button (Cancel by default)
submitText Text for the Submit button (Submit by default)
showErrorList Boolean to display the error list
showHelperError Boolean to display error in FormHelperText

Classes

name element
root The surrounding Paper element
field Fields container
formButtons Button div
button Cancel/Submit form button
cancel Cancel form button
submit Submit form button

In-depth prop descriptions

uiSchema

ui:widget - string

This setting handles the input type that will be shown.

Default - textarea

  • radio
  • updown
  • password
  • textarea
  • checkboxes
  • alt-datetime (todo)

ui:title - string

Title of field that will be shown

ui:description - string

The description text that will be shown when hovering on the info icon

ui:options - object

inline - boolean

disabled - boolean

disabled - function(data, objectData) should return boolean

inputType (todo) - Format the input to a specific type (e.g. Phone, Credit Card, Date, etc)

ui:help - string

Help text that will be shown below the input

ui:orientation - string

row

default

Contributing

Issues and pull requests welcome!

Give the initial author credit, too.