React Json Schema Form (material-ui)

Material UI port of jsonschema-form.

live playground and Detailed Docs

Install instructions via npm

npm install --save @react-jsonschema-form/material-ui-k3xb8hs9c

Example Usage

More detailed example can be seen here

// Library
import React from 'react';
import MaterialJsonSchemaForm from '@react-jsonschema-form/material-ui-k3xb8hs9c';

// 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={givenSchema}
        uiSchema={givenUISchema}
        formData={givenFormData}
        onCancel={onCancel}
        onSubmit={onSubmit}
        onUpload={onUpload}
        onChange={onFormChanged}
        onError={onError}
        /* Optional Param for custom functions to be executed for transforming data */
        interceptors={{
            translateRatings: (givenData, uiData) => ({ givenData, uiData }),
        }}
        /* Optional Param for custom components */
        components={{
        customComponent: ({ onChange, ...rest }) => (
          <CustomComponent onChange={onChange} formData={givenFormData} uiData={givenUIData} {...rest} />
        ),
        customRating: ({ onChange, ...rest }) => (
          <CustomRating onChange={onChange} formData={givenFormData} uiData={givenUIData} {...rest} />
        ),
        }}
        /* Optional Param for custom validation */
        validations={{
            confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
            message: validations.confirmPassword.message,
            inline: true,
            }),
        }}
        /* Optional Param to auto submit form on press of enter */
        submitOnEnter
      />
    );
}

export default Example;