Jsonschema-form-for-material-ui NPM

jsonschema-form-for-material-ui

A Material UI port of react-jsonschema-form.

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

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