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+)
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 [email protected]
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
onErrorto get errors available in form on every change - new Prop
uiDatato 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.