A Material UI port of jsonschema-form.
A live playground and Detailed Docs
npm install --save react-jsonschema-form-material-ui
More detailed example can be seen here
// Library
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
// Internals
const schema = require('./path-to your-schema.json');
const uiSchema = require('./path-to your-ui-schema.json');
const formData = require('./path-to your-ui-formData.json');
class Example extends React.Component {
onSubmit = (value, callback) => {
console.log('onSubmit: %s', JSON.stringify(value)); // eslint-disable-line no-console
setTimeout(() => callback && callback(), 2000); // just an example in real world can be your XHR call
}
onCancel = () => {
console.log('on reset being called');
}
onFormChanged = ({ formData }) => {
console.log('onFormChanged: ',formData); // eslint-disable-line no-console
}
onUpload = (value) => {
console.log('onUpload: ', value); // eslint-disable-line no-console
}
render() {
return (
<MaterialJsonSchemaForm
schema={schema}
uiSchema={uiSchema}
formData={formData}
onCancel={this.onCancel}
onSubmit={this.onSubmit}
onUpload={this.onUpload}
onChange={this.onFormChanged}
submitOnEnter
activityIndicatorEnabled
/>
);
}
}
- New version 2.0 support for material ui 4
- Webpack 4 integration
- Material UI picker module updated
- Support for File Upload and many more components
- Performance efficient refactored library size (233kb gzip and 914kb non-gzip)
- Please use version 1.0.109 of React Material-ui-jsonschema-form.
- Material UI Date / time picker
- Material UI Multi-selecbox
- Creatable multi selectbox
- Component active / inactive
- Rich Text Editor
- Upload File
submitOnEnter
prop - enables to submit form on key press 'Enter'activityIndicatorEnabled
prop - enables nice activity indicator besides your submit button allowing you to control the timing via a callback.