# React Json Schema Form (material-ui)
    [![BrowserStack Status](https://automate.browserstack.com/badge.svg?badge_key=MzZ5RE5vdml6Yk5EM0JTZ3l5cGxJKzVLRWlqNVdHbDkzdkprejFkSWZtZz0tLTdxdGFIY3F5a2pXSmNMM2ZLaVMwQ3c9PQ==--74a6da6f146182f21dbe380708e81c257b1cefab%)](https://automate.browserstack.com/public-build/MzZ5RE5vdml6Yk5EM0JTZ3l5cGxJKzVLRWlqNVdHbDkzdkprejFkSWZtZz0tLTdxdGFIY3F5a2pXSmNMM2ZLaVMwQ3c9PQ==--74a6da6f146182f21dbe380708e81c257b1cefab%) [![GitHub package.json version](https://img.shields.io/github/package-json/v/vip-git/react-jsonschema-form-material-ui?style=plastic)](https://github.com/vip-git/react-jsonschema-form-material-ui) [![npm](https://img.shields.io/npm/dt/react-jsonschema-form-material-ui)](https://www.npmjs.com/package/react-jsonschema-form-material-ui) [![GitHub issues](https://img.shields.io/github/issues/vip-git/react-jsonschema-form-material-ui)](https://github.com/vip-git/react-jsonschema-form-material-ui/issues/) [![GitHub pull requests](https://img.shields.io/github/issues-pr/vip-git/react-jsonschema-form-material-ui)](https://github.com/vip-git/react-jsonschema-form-material-ui/pulls/)


    A [**Material UI**](http://www.material-ui.com/) port of [**jsonschema-form.**](https://json-schema.org/)

    A [**live playground**](https://react-jsonschema-form-material-ui.github56.now.sh/) and [**Detailed Docs**](https://react-json-schema.app/docs)

    ## Install instructions via npm

    ```text
    npm install --save @react-jsonschema-form/material-ui-csed1n-we
    ```

    ## Example Usage

    > More detailed example can be seen [here](https://github.com/vip-git/react-jsonschema-form-material-ui/blob/master/src/demo/body/Example.jsx)

    ```jsx
    // Library
    import React from 'react';
    import MaterialJsonSchemaForm from '@react-jsonschema-form/material-ui-csed1n-we';

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