Material UI

Search…

Universal JSON Schema

Platform

Web

Material UI

React JSON Schema Form (Material UI)

​​
​ ​
​ ​
​ ​
​ ​
​​
A Material UI port of jsonschema-form.​
A live playground and Detailed Docs​
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.