docs

description
React jsonschema form comes with inbuilt and custom components

Documentation

Install instructions via npm

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

Component Name	Schema	UISchema	FormData	Type	Status
****Material UI - Date / Time Picker****	✅	✅	✅	Inbuilt	****Done****
****Material UI Selectbox****	✅	****❌	✅	Inbuilt	Done****
****React Select and Multi Select****	✅	✅	✅	Inbuilt	Done****
****React Creatable Select****	✅	✅	✅	Inbuilt	Done****
****Component active / inactive****	****❌ ****	✅	****❌	Inbuilt	Done****
****Rich Text Editor****	✅	✅	✅	Inbuilt	Done****
****Upload File****	✅	✅	✅	Inbuilt	Done****
****Number / Up down widget****	✅	✅	✅	Inbuilt	Done****
****Telephone****	✅	✅	✅	Inbuilt	Done****
****Currency****	✅	✅	✅	Inbuilt	Done****
****Nested****	✅	✅	✅	Inbuilt	Done****
****Password****	✅	✅	✅	Inbuilt	Done****
****Checkbox****	✅	✅	✅	Inbuilt	Done****
****Radio Button****	✅	✅	✅	Inbuilt	Done****
****Rating Component****	✅	✅	✅	Custom	Done****

Example Usage

More detailed example can be seen here and for usage on validations please see 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
            />
        );
    }
}