Effortless react forms with Material UI

#react #form #reactform #jsonschema

In this article, we would see how to create react forms effortlessly using Material UI and json.

We are going to create a registration form using MuiForms react library.

Install MuiForms

npm install mui-forms

Define your schema

{
"fields": [{
        "name": "first_name",
        "meta": {
            "displayType": "text",
            "displayName": "First Name",
            "displayProps": {
                "md": 6,
                "sm": 6
            }
        }
    }, {
        "name": "last_name",
        "meta": {
            "displayType": "text",
            "displayName": "Last Name",
            "displayProps": {
                "md": 6,
                "sm": 6
            }
        }
    }, {
        "name": "email",
        "meta": {
            "displayType": "email",
            "displayName": "Emal"
        }
    }, {
        "name": "password",
        "meta": {
            "displayType": "password",
            "displayName": "Your password"
        }
    }]
}

Create a file with name schema.json (or any other name) and save it.

Add to your app

import React from "react";
import MuiForms from "mui-forms";
import schema from "./schema.json";

function MyForm() {
  return (
   <MuiForms 
      schema={schema} 
      onSubmit={(formData) => {
        // handle form submission
      }}
    />
  )
}