Skip to content

vip-git/universal-json-schema

main
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.

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 Known Vulnerabilities GitHub package.json version npm GitHub issues GitHub pull requests

Build and Test CI BrowserStack Status Build Status

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