material-form-builder v1.2.10
Mui Version Compatibility
MUI version | MFB version |
---|---|
^5.x | ^0.x |
^6.x | ^1.x |
Quick Access
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
back to top
7 months ago
7 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago