grangier/react-jsonschema-form-material-ui

React - Material UI components for building Web forms from JSON Schema.

React Material-ui-jsonschema-form

A Material UI port of react-jsonschema-form.

A live playground

Install instructions via npm

npm install --save react-jsonschema-form-material-ui

Example Usage

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
            />
        );
    }
}

Latest Version - 2.0.15 (Material UI 4+)

• New version 2.0 support for material ui 4
• Webpack 4 integration
• Material UI picker module updated
• Performance efficient refactored library size (233kb gzip and 914kb non-gzip)

Support for Material UI < 3.9

• Please use version 1.0.109 of React Material-ui-jsonschema-form.

New components integrated / Updates

• 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.