Material-form-builder NPM

Mui Version Compatibility

MUI version	MFB version
^5.x	^0.x
^6.x	^1.x

Quick Access

Component Props | getValues | setValues | clear
Type Of Inputs

introduction

Installation

Dependencies

Material UI (^5.x.x) is available as an npm package.

npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled dayjs

material-form-builder

npm:

npm install material-form-builder

yarn:

yarn add material-form-builder

basic usage:

import React, { useRef } from 'react'
import { FormBuilder } from 'material-form-builder'

const App = () => {
    const builderRef = useRef(null)
    const getValues = () => {
        const values = builderRef.current?.getValues()
    }
    const clear = () => {
        builderRef.current?.clear()
    }
    return (
        <Fragment>
            <Box>
                <FormBuilder
                    inputs={[
                        {
                            type: 'text',
                            selector: 'person_name',
                            label: 'Name',
                        },
                        {
                            type: 'text',
                            selector: 'person_family',
                            label: 'Family',
                        },
                    ]}
                    ref={builderRef}
                />
            </Box>
            <Box mt={1}>
                <Button color="success" onClick={getValues}>
                    Get
                </Button>
                <Button color="secondary" onClick={setValues}>
                    Set
                </Button>
                <Button color="primary" onClick={clear}>
                    clear
                </Button>
            </Box>
        </Fragment>
    )
}

Component Props:

key	description	link
inputs	inputs data	usage
ref	react ref	-

Ref Avilable Methods:

key	description	usage
getValues	get value data from form builder	usage
setValues	set your data into inputs	usage
clear	clear all inputs data	usage

Get Values Prop

builderRef.current?.getValues() usage:

{
    data: {
        person_name: 'ENTERED VALUE'
        person_family: 'ENTERED VALUE'
    },
    validation: {
        status: boolean,
        inputs: []
    }
}

Set Values Prop

builderRef.current?.setValues() usage:

builderRef.current
    ?.setValues({
        tid: 1,
        person_name: 'john',
        person_family: 'doe',
    })
    .then(() => {
        console.log('all promises were fulfilled !')
    })

The data entered in the inputs will be set and if additional values are received, they will be returned

Clear Prop

builderRef.current?.clear() usage:

builderRef.current?.clear().then(() => {
    console.log('all promises were fulfilled !')
})

Type Of Inputs

type	description	usage
text	text input	text input usage
number	number input	number input usage
checkbox	checkbox input	checkbox input usage
password	password input	password input usage
autocomplete	autocomplete input	autocomplete input usage
mobile	mobile input	mobile input usage
otp	otp input	otp input usage
mask	mask input	mask input usage
date	date input	date input usage
time	time input	time input usage
datetime	datetime input	datetime input usage
file	file input	file input usage
items	items input	items input usage
custom	custom input	custom input usage

Basic Input Props

key	type	description	sample
selector	string	-	-
defaultValue	Input Value Type	-	-
required	boolean	-	-
visible	boolean	-	-
wrapper	function	-	-
onChangeValue	function	-	-
getMutator	function	-	-
setMutator	function	-	-