In react, we are always involved in implementing a structure to receive information from the user The implementation of these structures may take us a lot of time My goal is to minimize this time You can create a branch of inputs with different structures with a few lines of code.
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
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>
)
}
key | description | link |
---|---|---|
inputs | inputs data | usage |
ref | react ref | - |
key | description | usage |
---|---|---|
getValues | get value data from form builder | usage |
setValues | set your data into inputs | usage |
clear | clear all inputs data | usage |
builderRef.current?.getValues()
usage:
{
data: {
person_name: 'ENTERED VALUE'
person_family: 'ENTERED VALUE'
},
validation: {
status: boolean,
inputs: []
}
}
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
builderRef.current?.clear()
usage:
builderRef.current?.clear().then(() => {
console.log('all promises were fulfilled !')
})
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 |
key | type | description | sample |
---|---|---|---|
selector | string | - | - |
defaultValue | Input Value Type | - | - |
required | boolean | - | - |
visible | boolean | - | - |
wrapper | function | - | - |
onChangeValue | function | - | - |
getMutator | function | - | - |
setMutator | function | - | - |
This project is licensed under the terms of the MIT license.