https://github.com/vip-git/nextjs-react-jsonschema-form-material-ui-example
https://github.com/vip-git/nextjs-react-jsonschema-form-material-ui-example
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vip-git/nextjs-react-jsonschema-form-material-ui-example
- Owner: vip-git
- Created: 2021-02-26T19:22:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-02T06:16:57.000Z (almost 4 years ago)
- Last Synced: 2025-04-22T20:37:31.460Z (about 1 year ago)
- Language: CSS
- Homepage: https://nextjs-react-jsonschema-form-material-ui-example.vercel.app/
- Size: 383 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## NextJS - React JSONSchema Form Material UI - Example
This is a small demo project showcasing compatiblity of nextjs with [react-jsonschema-form-material-ui](https://github.com/vip-git/react-jsonschema-form-material-ui)
```bash
yarn
npm run build
npm start
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
#### Example Code can be [seen here](./pages/index.js)
```jsx
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 setFormData(formData)}
onSubmit={() => console.log('form submitted')}
/>;
};
```