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

  

A Material UI port of jsonschema-form.

A live playground and Detailed Docs

Install instructions via npm (MUI 5+)

`text
npm install --save react-jsonschema-form-material-ui
`
>Follow Releases page to use latest or preleased tags.

#### For legacy version of < MUI 4
`text
npm install --save react-jsonschema-form-material-ui@3.0.0-mui-4
`

Basic Example Usage


`jsx
// 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 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

`jsx
// 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 (
// 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 }) => (

),
customRating: ({ onChange, ...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](https://react-jsonschema-form-material-ui.github56.now.sh) \[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.