OptimaJet Form Builder Components - Material UI
npm install @react-form-builder/components-material-uiThis library is part of the React Form Builder project.
This package contains visual components based on Material UI.
To learn how to use the package, see our documentation.
If you are using React 18 or below, you need to set up a resolution of react-is package to the same version as the react you are using.
Follow this guide.
``bash`
npm install @react-form-builder/core @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui
`typescript jsx
import {buildForm, FormViewer} from '@react-form-builder/core'
import {view} from '@react-form-builder/components-material-ui'
const simpleForm = buildForm({errorType: 'MuiErrorWrapper'})
.component('firstName', 'MuiTextField')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')
.component('lastName', 'MuiTextField')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')
.component('submit', 'MuiButton')
.prop('children', 'Submit')
.prop('color', 'primary')
.prop('variant', 'contained')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()
export const ViewerApp = () => {
return
getForm={() => simpleForm}
actions={{
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
}
`
`bash`
npm install @react-form-builder/core @react-form-builder/designer @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui
`typescript jsx
import {buildForm} from '@react-form-builder/core'
import {FormBuilder} from '@react-form-builder/designer'
import {builderView} from '@react-form-builder/components-material-ui'
const simpleForm = buildForm({errorType: 'MuiErrorWrapper'})
.component('firstName', 'MuiTextField')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')
.component('lastName', 'MuiTextField')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')
.component('submit', 'MuiButton')
.prop('children', 'Submit')
.prop('color', 'primary')
.prop('variant', 'contained')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()
export const BuilderApp = () => {
return
getForm={() => simpleForm}
actions={{
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
}
``
- Website
- Documentation
- Demo
This library is distributed under the MIT license.