🌠
🌠
🌠
🌠
Universal JSON Schema Form
GithubNPMDemo (Live Playground)
Search…
Universal JSON Schema
Platform
Web
React
Material UI
String
Boolean
Null
Array
Svelte
Vue
Angular
Stencil
Mobile
Logic
Powered By GitBook
Material UI
React JSON Schema Form (Material UI)

Install instructions via npm

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

Example Usage

More detailed example can be seen here​
// Library
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
​
// 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;

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/react-jsonschema-form-material-ui.git
Install dependencies and module generator
npm install
Run the demo to test your changes
npm run start:demo (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.
Previous
React
Next
String
Last modified 9mo ago
Copy link
On this page
Install instructions via npm
Example Usage
Latest Version [JSONSchema-Draft-7 Support]
Contributing
Building/Testing