jff
jsonschema-form-for-material-ui
npm i jsonschema-form-for-material-ui
jff

jsonschema-form-for-material-ui

Material-UI port of react-jsonschema-form

by Seva Maltsev

1.4.3 (see all)License:ISCTypeScript:Not Found
npm i jsonschema-form-for-material-ui
Readme

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

PropDescription
schemaThe JSON Schema that will be the base of the form
classeswithStyles() classes that get passed to root components for better styling of the form
uiSchemaExtra styling for fields.
Each key references one schema key
formDataThe initial data with which to populate the form
onCancelCalled when the Cancel button is pressed
onSubmitCalled when the Submit button is pressed
onChangeCalled when form data is changed
cancelTextText for the Cancel button (Cancel by default)
submitTextText for the Submit button (Submit by default)
showErrorListBoolean to display the error list
showHelperErrorBoolean to display error in FormHelperText

Classes

nameelement
rootThe surrounding Paper element
fieldFields container
formButtonsButton div
buttonCancel/Submit form button
cancelCancel form button
submitSubmit 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.

Downloads/wk

10

GitHub Stars

19

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

9

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.4.3
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate