🌠
Universal JSON Schema Form
  • Universal JSON Schema
    • Platform
      • Web
        • React
          • Material UI
            • String
              • Input
            • Boolean
            • Null
            • Array
        • Svelte
        • Vue
        • Angular
        • Stencil
      • Mobile
        • React Native
        • Ionic
        • NativeScript
    • Logic
      • Interceptors
      • Utils
Powered by GitBook
On this page
  • Install instructions via npm
  • Example Usage
  • Latest Version [JSONSchema-Draft-7 Support]
  • Contributing
  • Building/Testing

Was this helpful?

  1. Universal JSON Schema
  2. Platform
  3. Web
  4. React

Material UI

React JSON Schema Form (Material UI)

PreviousReactNextString

Last updated 3 years ago

Was this helpful?

A port of

A and

Install instructions via npm

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

Example Usage

More detailed example can be seen

// 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;
  • 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

Contributing

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

Latest Version [JSONSchema-Draft-7 Support]

For more info you can follow our

We welcome , enhancements, and bug-fixes. Open an and submit a .

You can send a PR through and a release will be made following once your PR gets merged.

changelog
all contributions
issue on GitHub
pull request
Semantic Versioning
Material UI
jsonschema-form.
live playground
Detailed Docs
here
Page cover image
npm version
BrowserStack Status
GitHub package.json version
GitHub issues
GitHub pull requests
npm