mui-forms icon indicating copy to clipboard operation
mui-forms copied to clipboard

Material UI forms using json based schema

mui-forms

Material UI forms using json based schema JavaScript Style Guide

Change logs

Advantages and features

  • Mui Components
  • Built-in layouting
  • Supports custom components
  • Easily define field relationships and build advanced forms
  • Load data from remote API

Install

npm install mui-forms

Basic Usage

1. Define your JSON schema

const exampleSchema = {
    "fields": [{
        "name": "first_name",
        "meta": {
            "displayType": "text",
            "displayName": "First Name"
        }
    }, {
        "name": "last_name",
        "meta": {
            "displayType": "text",
            "displayName": "Last Name"
        }
    }]
}

2. Usage

import React from 'react'

import MuiForms from 'mui-forms';

export function MyForm() {
    return (
        <MuiForms
            schema={exampleSchema}
            onSubmit={(formData) => {
              // submit data
            }}
        />
    );
}

3. Schema details

Check out the file

Contributions

Open source contribution is welcome.

License

MIT © manojadams

Give a ⭐️ if you liked this project!