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
; const styles = 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=thisonCancel onSubmit=thisonSubmit onChange=thisonFormChanged/>
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
string
ui:widget - This setting handles the input type that will be shown.
Default - textarea
- radio
- updown
- password
- textarea
- checkboxes
alt-datetime (todo
)
string
ui:title - Title of field that will be shown
string
ui:description - The description text that will be shown when hovering on the info icon
object
ui:options - 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)
string
ui:help - Help text that will be shown below the input
string
ui:orientation - row
default
Contributing
Issues and pull requests welcome!
Give the initial author credit, too.