Material UI Schema Form
View live demo!
material-ui-schema-form
This library is an ongoing re-write of Network New Technologies' react-schema-form.
Why re-write?
The original react-schema-form
evolved a bit chaotically ending up becoming a subset of material-ui
rather than agnostic react component. This repo is trying to accept said relationship and shifting focus to making sure it is understood that this library is meant for projects using material-ui
.
Also the original library has fallen behind in dependency management and its maintainers don't seem to have an upgrade anywhere on their roadmap. This re-write is meant to bring the SchemaForm
component up to date with React 16 and Material UI v1 and move on forward from there.
Installation
npm install material-ui-schema-form --save
There is one added on component react-schema-form-rc-select for multiple select and dynamically loading dropdown from server. To install it.
npm install react-schema-form-rc-select --save
Usage
var SchemaForm = ; <SchemaForm schema=thisstateschema form=thisstateform model=thispropsmodel onModelChange=thispropsonModelChange /> // for example: { this;}
Form format
React-schema-form implements the form format as defined by the json-schema-form standard.
The documentation for that format is located at the json-schema-form wiki.
Customization
material-ui-schema-form provides most fields including FieldSet and Array and they might cover most use cases; however, you might have requirement that needs something that is not built in. In this case, you can implement your own field and inject it into the generic mapper for the builder to leverage your component. By passing a mapper as a props to the SchemaForm, you can replace built in component with yours or you can define a brand new type and provide your component to render it.
react-schema-form-rc-select is an example to provide multiple select to the react schema form.
;;... var mapper = "rc-select": RcSelect ; var schemaForm = ''; if thisstateformlength > 0 schemaForm = <SchemaForm schema=thisstateschema form=thisstateform model=thisstatemodel onModelChange=thisonModelChange mapper=mapper /> ;
License
MIT Licensed.