Skip to content

vip-git/cra-react-jsonschema-form-material-ui-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CRA - React JSONSchema Form Material UI - Example

This is a small demo project showcasing compatiblity of CRA with react-jsonschema-form-material-ui

yarn 
npm start

Open http://localhost:3000 with your browser to see the result.

Example Code can be seen here

import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';

import schema from '../simple/schema.json';
import uiSchema from '../simple/ui-schema.json';
import givenFormData from '../simple/form-data.json';

const theme = {
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
};

export default () => {
  const [formData, setFormData] = React.useState(givenFormData);
  return <MaterialJsonSchemaForm 
            schema={schema} 
            uiSchema={uiSchema} 
            formData={formData} 
            theme={theme} // Optional
            onChange={({ formData }) => setFormData(formData)}
            onSubmit={() => console.log('form submitted')}
          />;
};

About

This is a small demo project showcasing compatibility of react-jsonschema-form with CRA

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published