React-aztec NPM

Build dynamic forms using Material UI

Check demo & detail docs Documentation
Build dynamic forms using interactive editor Playground

Installation

npm install material-ui --save npm install react-aztec --save

Basic Usage

Refer Material-UI documentation for components props

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 (
      <div>
        <Aztec
          guid="unique-id"
          data={formData}
          library={MUI}
        />
      </div>
    )
  }
}

Usage with form validation

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 (
      <div>
        <Aztec
          guid="unique-id"
          data={formData}
          library={MUI}
        />
      </div>
    )
  }
}

Usage with form layout

Aztec uses bootstrap 24 column grid layout

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 (
      <div>
        <Aztec
          guid="unique-id"
          data={formData}
          library={MUI}
        />
      </div>
    )
  }
}