custom-react-jsonschema-form-material-ui v2.2.4

React Json Schema Form (Mui)

A Material UI port of jsonschema-form.

A live playground and Detailed Docs

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');

const Example () => {
    const 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
    }
    
    const onCancel = () => {
        console.log('on reset being called');
    }
    
    const onFormChanged = ({ formData }) => {
        console.log('onFormChanged: ',formData); // eslint-disable-line no-console
    }
    
    const onUpload = (value) => {
        console.log('onUpload: ', value); // eslint-disable-line no-console
    }
    
    return (
         <MaterialJsonSchemaForm
              schema={schema}
              uiSchema={uiSchema}
              formData={formData}
              onCancel={onCancel}
              onSubmit={onSubmit}
              onUpload={onUpload}
              onChange={onFormChanged}
              submitOnEnter
              activityIndicatorEnabled
         />
    );
}

export default Example;

Latest Version (Material UI 4+)

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

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.