https://github.com/ajainvivek/react-aztec
🔥 Material UI based dynamic form component for React using JSON
https://github.com/ajainvivek/react-aztec
dynamic-forms json json-forms material-dynamic-form material-ui react schema
Last synced: 7 months ago
JSON representation
🔥 Material UI based dynamic form component for React using JSON
- Host: GitHub
- URL: https://github.com/ajainvivek/react-aztec
- Owner: ajainvivek
- License: mit
- Created: 2016-11-24T22:26:45.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-17T04:49:14.000Z (over 8 years ago)
- Last Synced: 2025-06-20T07:07:28.109Z (8 months ago)
- Topics: dynamic-forms, json, json-forms, material-dynamic-form, material-ui, react, schema
- Language: JavaScript
- Homepage: https://ajainvivek.github.io/react-aztec/#/
- Size: 3.5 MB
- Stars: 37
- Watchers: 6
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/ajainvivek/react-aztec/issues)
[](https://www.npmjs.com/package/react-aztec)
Build dynamic forms using Material UI
> Check demo & detail docs [Documentation](http://ajainvivek.github.io/react-aztec/#/simpleform)
> Build dynamic forms using interactive editor [Playground](http://ajainvivek.github.io/react-aztec/#/playground)
## Installation
`npm install material-ui --save`
`npm install react-aztec --save`
### Basic Usage
Refer [Material-UI](http://www.material-ui.com/) documentation for components props
```javascript
import { TextField } as MUI from 'material-ui';
import { Aztec } from 'react-aztec';
const formData = [
{
id: "name",
type: 'textfield',
props: {
id: 'name',
floatingLabelText: 'Hello, Whats your name?',
hintText: 'Name is required'
}
}
];
class SimpleForm extends React.Component {
render() {
return (
)
}
}
```
### Usage with form validation
```javascript
import * as MUI from 'material-ui';
import { Aztec } from 'react-aztec';
const formData = [
{
id: "name",
type: 'textfield',
props: {
id: 'name',
floatingLabelText: 'Hello, Whats your name?',
hintText: 'Name is required'
},
rules: {
validation: [
{
rule: 'mandatory', //email, lowercase, mobile
message: 'Name is required!!' // on error message to be displayed
}
]
}
}
];
class SimpleForm extends React.Component {
render() {
return (
)
}
}
```
### Usage with form layout
Aztec uses bootstrap 24 column grid layout
```javascript
import * as MUI from 'material-ui';
import { Aztec } from 'react-aztec';
const formData = [
{
id: "name",
type: 'textfield',
props: {
id: 'name',
floatingLabelText: 'Hello, Whats your name?',
hintText: 'Name is required'
},
layout: {
row: 1,
xs: {
col:24
},
sm: {
col:24
},
md: {
col:12
},
lg: {
col:8
}
}
}
];
class SimpleForm extends React.Component {
render() {
return (
)
}
}
```
## Contribute
If you have a feature request, please add it as an issue or make a pull request.
## License
MIT