Material UI
React JSON Schema Form (Material UI)

Install instructions via npm

1
npm install --save react-jsonschema-form-material-ui
Copied!

Example Usage

More detailed example can be seen here​
1
// Library
2
import React from 'react';
3
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
4
​
5
// Internals
6
const schema = require('./path-to your-schema.json');
7
const uiSchema = require('./path-to your-ui-schema.json');
8
const formData = require('./path-to your-ui-formData.json');
9
​
10
const Example () => {
11
const onSubmit = (value, callback) => {
12
console.log('onSubmit: %s', JSON.stringify(value)); // eslint-disable-line no-console
13
setTimeout(() => callback && callback(), 2000); // just an example in real world can be your XHR call
14
}
15
​
16
const onCancel = () => {
17
console.log('on reset being called');
18
}
19
​
20
const onFormChanged = ({ formData }) => {
21
console.log('onFormChanged: ',formData); // eslint-disable-line no-console
22
}
23
​
24
const onUpload = (value) => {
25
console.log('onUpload: ', value); // eslint-disable-line no-console
26
}
27
​
28
return (
29
<MaterialJsonSchemaForm
30
schema={givenSchema}
31
uiSchema={givenUISchema}
32
formData={givenFormData}
33
onCancel={onCancel}
34
onSubmit={onSubmit}
35
onUpload={onUpload}
36
onChange={onFormChanged}
37
onError={onError}
38
/* Optional Param for custom functions to be executed for transforming data */
39
interceptors={{
40
translateRatings: (givenData, uiData) => ({ givenData, uiData }),
41
}}
42
/* Optional Param for custom components */
43
components={{
44
customComponent: ({ onChange, ...rest }) => (
45
<CustomComponent onChange={onChange} formData={givenFormData} uiData={givenUIData} {...rest} />
46
),
47
customRating: ({ onChange, ...rest }) => (
48
<CustomRating onChange={onChange} formData={givenFormData} uiData={givenUIData} {...rest} />
49
),
50
}}
51
/* Optional Param for custom validation */
52
validations={{
53
confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
54
message: validations.confirmPassword.message,
55
inline: true,
56
}),
57
}}
58
/* Optional Param to auto submit form on press of enter */
59
submitOnEnter
60
/>
61
);
62
}
63
​
64
export default Example;
Copied!

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
1
git clone https://github.com/vip-git/react-jsonschema-form-material-ui.git
Copied!
Install dependencies and module generator
1
npm install
Copied!
Run the demo to test your changes
1
npm run start:demo (open http://localhost:3005 once build is successful)
Copied!
Run the tests once you are done with your changes
1
npm test
Copied!
You can send a PR through and a release will be made following Semantic Versioning once your PR gets merged.
Last modified 6mo ago