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 | - | - |

License

This project is licensed under the terms of the MIT license.

Sponsoring services

mentasystem.net

back to top