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 https://github.com/mozilla-services/react-jsonschema-form/issues/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

Classes

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.