README

React Json Schema Form (Mui)

This Project will soon become a umbrella repo for JSON Schema Support to major Frameworks and UI Frameworks.

More info on this has been outlined in Universal JSON Schema document.

codecov">

A Material UI port of jsonschema-form.

A live playground and Detailed Docs

Install instructions via npm (MUI 5+)

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

Follow Releases page to use latest or preleased tags.

For legacy version of < MUI 4

npm install --save react-jsonschema-form-material-ui@3.0.0-mui-4

Basic Example Usage

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

// Internals
import schema from '../simple/schema.json';
import uiSchema from '../simple/ui-schema.json';
const givenXhrSchema = require('./path-to your-xhr-schema.json'); // Optional
import givenFormData from '../simple/form-data.json';

export default () => {
  const [formData, setFormData] = React.useState(givenFormData);
  
  return <MaterialJsonSchemaForm 
            schema={schema} 
            uiSchema={uiSchema} 
        xhrSchema={givenXhrSchema || {}} // Optional
        theme={} // Optional - You need to explicitly provide your custom theme from MUI5 onwards
            formData={formData} 
            onChange={({ formData }) => setFormData(formData)}
            onSubmit={(submittedData) => console.log('form submitted', submittedData)}
          />;
};

Advanced Example Usage

More detailed example can be seen here

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

// Internals
const givenSchema = require('./path-to your-schema.json');
const givenUISchema = require('./path-to your-ui-schema.json');
const givenXhrSchema = require('./path-to your-xhr-schema.json');
const givenFormData = require('./path-to your-ui-formData.json');

const Example () => {
    
    const [formData, setFormData] = React.useState(givenFormData);
    
    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 }) => setFormData(formData);
    
    const onUpload = (value) => {
        console.log('onUpload: ', value); // eslint-disable-line no-console
    }
    
    return (
         <MaterialJsonSchemaForm
        // Define Schema
        schema={givenSchema}
        uiSchema={givenUISchema}
        xhrSchema={givenXhrSchema || {}}
            formData={formData}
        theme={} // Optional - You need to explicitly provide your custom theme from MUI5 onwards
        
        // Define Event handlers
            onChange={onFormChanged} 
        onSubmit={onSubmit}
        
        // Every Prop below is optional - every prop above this line is required
            onCancel={onCancel} /* optional */
        onUpload={onUpload} /* optional */
            onError={onError} /* optional */
        
            /* Optional Prop for custom functions to be executed for transforming data */
            interceptors={{
                translateRatings: (givenData, uiData) => ({ givenData, uiData }),
            }}
        
            /* Optional Prop 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 Prop for custom validation */
            validations={{
                confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
              message: validations.confirmPassword.message,
              inline: true,
                }),
            }}
        
            /* Optional Prop to auto submit form on press of enter */
        submitOnEnter
    />
    );
}

export default Example;

Latest Version [JSONSchema-Draft-7 Support]

Build system now upgraded to webpack 5
React select values are no longer stringify results but array values.
New Tabs UI to divide sub sections to tabs
Additional Properties and Additional Items feature enabled
"ui:options" and "ui:style" enabled for prop passing and styling every field
On the fly module creation
Reference Schema's via http and inline references
Support alternatives - oneOf, anyOf, allOf
Support for dependencies - array of conditionals
new Prop onError to get errors available in form on every change
new Prop uiData to control ui only data to add separation of concern with form data
Demo updated with monaco editor and live validation changes
New interceptors to transform form and uiData using uiSchema - ui:interceptor

For more info you can follow our changelog

Contributing

We welcome all contributions, enhancements, and bug-fixes. Open an issue on GitHub and submit a pull request.

Building/Testing

To build/test the project locally on your computer:

Fork this repo and then clone

git clone https://github.com/vip-git/universal-json-schema.git

Install dependencies and module generator

npm install

Run the demo to test your changes

npm start (open http://localhost:3005 once build is successful)

Run the tests once you are done with your changes

npm test

You can send a PR through and a release will be made following Semantic Versioning once your PR gets merged.

Usage no npm install needed!