Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nadunindunil/material-jsonschema-form
material-ui form generated from json
https://github.com/nadunindunil/material-jsonschema-form
Last synced: 3 months ago
JSON representation
material-ui form generated from json
- Host: GitHub
- URL: https://github.com/nadunindunil/material-jsonschema-form
- Owner: nadunindunil
- Created: 2019-06-05T20:18:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-03T16:53:43.000Z (over 4 years ago)
- Last Synced: 2024-04-23T15:42:15.813Z (7 months ago)
- Language: TypeScript
- Homepage: https://nadunindunil.github.io/material-jsonschema-form
- Size: 2.03 MB
- Stars: 4
- Watchers: 1
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-material-ui - Material JSON Schema Form - Material-UI form generated from json. (Components)
README
# material-jsonschema-form
> material-ui form generated from json
[](https://www.npmjs.com/package/material-jsonschema-form) [](https://standardjs.com)
## Install
```bash
npm install --save material-jsonschema-form
```
## Usage
```jsx
import * as React from 'react';
import Form from 'material-jsonschema-form';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
formJson: {
formName: 'test',
forms: [
{
title: 'A registration form1',
description: 'A simple form example1.',
properties: [
{ name: 'projectId', component: 'text', label: 'Team Name' },
{ name: 'appName', component: 'text', label: 'Application Name' }
]
},
{
title: 'A registration form2',
description: 'A simple form example2.',
properties: [
{ name: 'teamName', component: 'text', label: 'Team Name' },
{ name: 'division', component: 'text', label: 'Division' },
{
name: 'pay',
component: 'select',
label: 'Pay Method',
elements: [{ label: 'label1', value: 'value1' }, { label: 'label2', value: 'value2' }]
}
]
},
{
title: 'A table form',
description: 'A simple form example2.',
isCard: false,
properties: [
{
title: 'table 1',
name: 'testTable',
component: 'table',
rows: [
{
name: 'sel3',
label: 'Dummy Select',
component: 'select',
elements: [{ label: 'label1', value: 'value1' }, { label: 'label2', value: 'value2' }]
},
{ name: 'title1', component: 'text', label: 'Team 1' },
{ name: 'title2', component: 'text', label: 'Team 2' }
]
},
{
title: 'table 2',
name: 'testTable2',
component: 'table',
rows: [
{
name: 'projNam',
label: 'select',
component: 'select',
elements: [{ label: 'label1', value: 'value1' }, { label: 'label2', value: 'value2' }]
},
{ name: 'title3', component: 'text', label: 'Title 1' },
{ name: 'title4', component: 'text', label: 'Title 2' }
]
}
]
}
]
}
};
}
onSubmit = values => {
window.alert(JSON.stringify(values, null, 2));
};
render() {
return ;
}
}
```
## How to contribute
Inside the project folder, you can run some built-in commands:
### `npm start` or `yarn start`
Runs the library in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
### `npm run test` or `yarn run test`
Runs the test watcher in an interactive mode.
### `npm run build` or `yarn build`
Builds the library for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
## Todo
- [x] Basic Implementation
- [ ] Validations
- [ ] Auto suggest
- [ ] File uploads
- [ ] Custom styles
## License
MIT © [nadunindunil](https://github.com/nadunindunil)