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
}}
/>
)
}
Registration form is ready
Top comments (0)