DEV Community

Manoj
Manoj

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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" } }] }
Enter fullscreen mode Exit fullscreen mode

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 }} /> ) }
Enter fullscreen mode Exit fullscreen mode

Registration form is ready

Reference:

Registration form link

Github source

Top comments (0)